If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

jQuery-ui not styling Panel in Firefox addon



Add-on SDK
4 years ago
4 years ago


(Reporter: bobbyrne01, Unassigned)


Firefox Tracking Flags

(Not tracked)



(2 attachments)

420.14 KB, application/zip
353.24 KB, application/x-xpinstall


4 years ago
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:25.0) Gecko/20100101 Firefox/25.0 (Beta/Release)
Build ID: 20131028113246

Steps to reproduce:

Developing an addon which uses a Panel to display a number of preferences to user.
Problem trying to theme Panel content with jquery-ui

This link details code involved:

Actual results:

The Panel displays and shows the buttons defined, but they are not styled using smoothness theme

Expected results:

Assumed Panel would have displayed with smoothness theme applied? Is this expected to work?

Comment 1

4 years ago
Addon being developed using ..
Add-on SDK 1.14 (39467a307f58b63c1907c8d383e48475c98b0624)
Matteo, can you look at this?
Flags: needinfo?(zer0)
bobbyrne01, could you please add as attachment a zip with the source of the add-on that replicates the issue? Thanks!
Flags: needinfo?(zer0) → needinfo?(bobbyrne01)

Comment 4

4 years ago
Created attachment 8336507 [details]

@Matteo, attached is a zip of the addon source. Will also attach the .xpi
Flags: needinfo?(bobbyrne01)

Comment 5

4 years ago
Created attachment 8336508 [details]

Comment 6

4 years ago
have you been able to reproduce issue with attached project?
Matteo can you test this test case?
Flags: needinfo?(zer0)


4 years ago
Priority: -- → P1
@bobbyrne0, thanks for the attachments!
So, I'm not a jquery-ui expert, therefore I went to http://jqueryui.com/themeroller/, downloaded a theme, and checked the `index.html` and compare with your code.

So, it doesn't work in your case, for the following reasons:
1. `Panel` doesn't support `contentStyle*`. You can simply add the style directly in the HTML's document. I suggest to do the same also for the jquery's script:

        <meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="../lib/css/smoothness/jquery-ui-1.10.3.custom.min.css">
        <script src="../lib/js/jquery-1.9.1.js"></script>
        <script src="../lib/js/jquery-ui-1.10.3.custom.min.js"></script>
        <!-- etc... -->

2. In accordance with the ThemeRoller's index.html, it seems you have to initialize the UI on the elements you want to. So, for the button, you have to add something like that in your HTML document:


(After all jquery's script of course)

Doing such things makes the theme applied to the button in your HTML document. Let me know if you still have issue, but I would close this bug as "invalid" – because is not actually a bug.

I would also suggest you to put your ConfirmPanel.js code into the HTML document, or link that file as I shown for the jquery's scripts: it will also simplify the communication with the main add-on code and the page itself using the `addon` object (see: "Scripting Trusted Panel Content", https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/sdk/panel.html)
Last Resolved: 4 years ago
Flags: needinfo?(zer0)
Resolution: --- → INVALID

Comment 9

4 years ago
Thanks for your help! :)
You need to log in before you can comment on or make changes to this bug.