1162059 - Enable finer control for preferences pane

Status: RESOLVED DUPLICATE of bug 790323

(Add-on SDK Graveyard :: General, defect)

Description

[kkapsner]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20150415140819

Steps to reproduce:

I would like to be able to control the preference panel in a finer way. E.g. I would like to be able to add a menuseparator in a menulist (my suggestion would be to check if the value and the label of the option is an empty string and add a menuseparator if so:
Python:
        elif (pref["type"] == "menulist"):
            menulist = doc.createElement("menulist")
            menupopup = doc.createElement("menupopup")
            for item in pref["options"]:
                if item["value"] == "" and item["label"] == "":
                    menuitem = doc.createElement("menuseparator")
                else:
                    menuitem = doc.createElement("menuitem")
                    menuitem.setAttribute("value", item["value"])
                    menuitem.setAttribute("label", item["label"])
                menupopup.appendChild(menuitem)
            menulist.appendChild(menupopup)
            setting.appendChild(menulist)

JS:
    else if (type === 'menulist') {
      let menulist = document.createElement('menulist');
      let menupopup = document.createElement('menupopup');
      for (let { value, label } of options) {
        let menuitem;
        if (!value && !label){
          menuitem = document.createElement('menuseparator');
        }
        else {
          menuitem = document.createElement('menuitem');
          menuitem.setAttribute('value', value);
          menuitem.setAttribute('label', label);
        }
        menupopup.appendChild(menuitem);
      }
      menulist.appendChild(menupopup);
      setting.appendChild(menulist);
    }
)

Another thing I would like to be able to control is the appearence of the <settings>. This could be easily done by allowing an optional "style" key in the preference-JSON and assign this to the XUL:

Python:
        setting.setAttribute("title", pref["title"])
        if "style" in pref:
            setting.setAttribute("style", pref["style"])

        if ("description" in pref):
            setting.appendChild(doc.createTextNode(pref["description"]))

JS:
function injectOptions({ preferences, preferencesBranch, document, parent, id }) {
  for (let { name, type, hidden, title, description, label, options, on, off, style } of preferences) {

    if (hidden) {
      continue;
    }

    let setting = document.createElement('setting');
    setting.setAttribute('pref-name', name);
    setting.setAttribute('data-jetpack-id', id);
    setting.setAttribute('pref', 'extensions.' + preferencesBranch + '.' + name);
    setting.setAttribute('type', type);
    setting.setAttribute('title', title);
    if (description)
      setting.setAttribute('desc', description);
    if (style)
      setting.setAttribute('style', style);

Python code is tested - JS not.


Actual results:

The generated options.xul should change accordingly.

Comment 1

[Erik Vold [:erikvold] (please needinfo? me)]

(In reply to kkapsner from comment #0)
> User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:37.0) Gecko/20100101
> Firefox/37.0
> Build ID: 20150415140819
> 
> Steps to reproduce:
> 
> I would like to be able to control the preference panel in a finer way. E.g.
> I would like to be able to add a menuseparator in a menulist (my suggestion
> would be to check if the value and the label of the option is an empty
> string and add a menuseparator if so:
> Python:
>         elif (pref["type"] == "menulist"):
>             menulist = doc.createElement("menulist")
>             menupopup = doc.createElement("menupopup")
>             for item in pref["options"]:
>                 if item["value"] == "" and item["label"] == "":
>                     menuitem = doc.createElement("menuseparator")
>                 else:
>                     menuitem = doc.createElement("menuitem")
>                     menuitem.setAttribute("value", item["value"])
>                     menuitem.setAttribute("label", item["label"])
>                 menupopup.appendChild(menuitem)
>             menulist.appendChild(menupopup)
>             setting.appendChild(menulist)
> 
> JS:
>     else if (type === 'menulist') {
>       let menulist = document.createElement('menulist');
>       let menupopup = document.createElement('menupopup');
>       for (let { value, label } of options) {
>         let menuitem;
>         if (!value && !label){
>           menuitem = document.createElement('menuseparator');
>         }
>         else {
>           menuitem = document.createElement('menuitem');
>           menuitem.setAttribute('value', value);
>           menuitem.setAttribute('label', label);
>         }
>         menupopup.appendChild(menuitem);
>       }
>       menulist.appendChild(menupopup);
>       setting.appendChild(menulist);
>     }
> )
> 

So you want a menu separator?

> Another thing I would like to be able to control is the appearence of the
> <settings>. This could be easily done by allowing an optional "style" key in
> the preference-JSON and assign this to the XUL:
> 
> Python:
>         setting.setAttribute("title", pref["title"])
>         if "style" in pref:
>             setting.setAttribute("style", pref["style"])
> 
>         if ("description" in pref):
>             setting.appendChild(doc.createTextNode(pref["description"]))
> 
> JS:
> function injectOptions({ preferences, preferencesBranch, document, parent,
> id }) {
>   for (let { name, type, hidden, title, description, label, options, on,
> off, style } of preferences) {
> 
>     if (hidden) {
>       continue;
>     }
> 
>     let setting = document.createElement('setting');
>     setting.setAttribute('pref-name', name);
>     setting.setAttribute('data-jetpack-id', id);
>     setting.setAttribute('pref', 'extensions.' + preferencesBranch + '.' +
> name);
>     setting.setAttribute('type', type);
>     setting.setAttribute('title', title);
>     if (description)
>       setting.setAttribute('desc', description);
>     if (style)
>       setting.setAttribute('style', style);
> 
> Python code is tested - JS not.
> 
> 
> Actual results:
> 
> The generated options.xul should change accordingly.

I'm not sure I'll go for this, as it could be done with a third party module, and I don't like the idea of adding a "style" key to the package.json at all.

Comment 2

[kkapsner]

(In reply to Erik Vold [:erikvold] (please needinfo? me) from comment #1)
> So you want a menu separator?
Yes. But this was the thing I stumbled uppon. There might also be other meaningful enhancements.

> I'm not sure I'll go for this, as it could be done with a third party
> module,
OK - how can I do this with a third party module with approx. the same efford?
Everything that comes to my mind is a lot of manual work.

> and I don't like the idea of adding a "style" key to the
> package.json at all.

The "style"-key was just a suggestion. If there would be a way to insert a CSS-file it would be even better (e.g. options.css in the root directory of the addon - I tried to add 
<?xml-stylesheet href="options.css" type="text/css"?> to the options.xul but this does not work).

Comment 3

[Erik Vold [:erikvold] (please needinfo? me)]

(In reply to kkapsner from comment #2)
> (In reply to Erik Vold [:erikvold] (please needinfo? me) from comment #1)
> > So you want a menu separator?
> Yes. But this was the thing I stumbled uppon. There might also be other
> meaningful enhancements.
> 
> > I'm not sure I'll go for this, as it could be done with a third party
> > module,
> OK - how can I do this with a third party module with approx. the same
> efford?
> Everything that comes to my mind is a lot of manual work.

Well until the third party module exists then yes someone has to create it, but it will be the same amount of work or less than creating a patch for the sdk.

Basically the module would have to listen to the "addon-options-displayed" as this code does:

https://github.com/mozilla/addon-sdk/blob/master/lib/sdk/preferences/native-options.js#L30-L47

then modify the document as you desire.

> > and I don't like the idea of adding a "style" key to the
> > package.json at all.
> 
> The "style"-key was just a suggestion. If there would be a way to insert a
> CSS-file it would be even better (e.g. options.css in the root directory of
> the addon - I tried to add 
> <?xml-stylesheet href="options.css" type="text/css"?> to the options.xul but
> this does not work).

Comment 4

[kkapsner]

(In reply to Erik Vold [:erikvold] (please needinfo? me) from comment #3)
> Basically the module would have to listen to the "addon-options-displayed"
> as this code does:
> 
> https://github.com/mozilla/addon-sdk/blob/master/lib/sdk/preferences/native-
> options.js#L30-L47
>

I already found that file and played with it. There is a little flaw with it: the eventlistener from native-options.js is called AFTER my eventlistener (I do not know why as it should be registered before). So I had to use setTimeout to get the injected nodes.