Closed Bug 939822 Opened 11 years ago Closed 11 years ago

jQuery-ui not styling Panel in Firefox addon

Categories

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

Product:
Add-on SDK Graveyard
Component:
General
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED INVALID

People

(Reporter: bobbyrne01, Unassigned)

Details

Attachments

(2 files)

addon.zip
420.14 KB, application/zip
Details
addon.xpi
353.24 KB, application/x-xpinstall
Details 
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:
http://stackoverflow.com/questions/19769334/jquery-ui-not-styling-panel-in-firefox-addon


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?
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)
Attached file addon.zip — 
@Matteo, attached is a zip of the addon source. Will also attach the .xpi
Flags: needinfo?(bobbyrne01)
Attached file addon.xpi — 

    
    

    
  
have you been able to reproduce issue with attached project?

    
    

    
  
Matteo can you test this test case?
Flags: needinfo?(zer0)

    
  
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:

    <html>
      <head>
        <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:

    <script>
      $(function(){
        $("button").button();
      })
    </script>

(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)
Status: UNCONFIRMED → RESOLVED
Closed: 11 years ago
Flags: needinfo?(zer0)
Resolution: --- → INVALID

    
    

    
  
Thanks for your help! :)

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: