Display image on toolbar depending on server response

[newbiegalore]

Hello to all the gentle folk
I have searched this forum and have not been able to find the solution
to my problem. I am looking for some advice/pointers.

Problem: In my toolbar extension, I need to display an image which
should change based on the response I receive from my server. My
extension will pick up the current page URL from the browser, send it
to my server, and receive the data back. Once this happens I need to
change the display image in my toolbar depending on the response
received.

I have tried using something like <image> to display an image on the
toolbar. I am confused about how to change this image, because it is
specified in the XUL file, and not in the js file.

I read up on an example which has a stock ticker embedded in the
status bar, but in that example the text/image changes when someone
clicks on the status bar. In my case I cannot wait for some event like
that to happen. As soon as I parse the html code received from my
server, I need to change the image on the toolbar.

I have read up on
http://groups.google.com/group/mozilla.dev.extensions/browse_thread/thread/616cc4febc3956cc/c4106a13e44783c1?lnk=gst&q=image+toolbar#c4106a13e44783c1

and it seems that I can write js within the css file itself! wow! is
this right?

Anyways the mentioned thread discusses setting a custom size/image for
the toolbar not changing the image depending on a result/event
dynamically. At least thats what I could understand.

Thanks in advance.

[newbiegalore]

-----------------In case this was not posted--------------
Hello everyone,

[arc]

On Apr 17, 3:20 pm, newbiegalore <banerjee.anir...@gmail.com> wrote:
> -----------------In case this was not posted--------------
> Hello everyone,
>
> I have searched this forum and have not been able to find the solution
> to my problem. I am looking for some advice/pointers.
>
> Problem: In my toolbar extension, I need to display an image which
> should change based on the response I receive from my server. My
> extension will pick up the current page URL from the browser, send it
> to my server, and receive the data back. Once this happens I need to
> change the display image in my toolbar depending on the response
> received.
>
> I have tried using something like <image> to display an image on the
> toolbar. I am confused about how to change this image, because it is
> specified in the XUL file, and not in the js file.

You can do this with CSS which has the ability to use different CSS
definitions based on attributes of the tag. For example, define this
in your CSS:

#statusImage[status="blue"]
{
src: url("chrome://mypath/my-blue-image.png");
}
#statusImage[status="yellow"]
{
src: url("chrome://mypath/my-yellow-image.png");
}

And then in your JS code, when you get the return result, just set the
attribute 'status' to the value you want ("blue" or "yellow" in the
example) on the image tag (with ID "statusImage" in the example) to
pick up the image you want.

> and it seems that I can write js within the css file itself! wow! is
> this right?

I would recommend not putting JS is a CSS file. Just because you can,
doesn't mean you should.

-tony

[newbiegalore]

Thanks Tony for the pointer, I will definitely try it out :-) . Thanks.

[newbiegalore]

On Apr 18, 7:43 am, arc <tony.cassan...@gmail.com> wrote:

Dear Tony,
Thanks for the pointer :-) . I am a newbie to extension
development and css and so the following question might seem a little
naive.

I tried the code you posted in the following way.

In the JS file

jaaldata is the responseText I get back from my server.

if ( jaaldata.indexOf("green") == -1 )
alert('green not found');
else{
alert('green found at' + jaaldata.indexOf("green") );
var jaalstar = document.getElemenById("JAAL-ResultButton");
jaalstar.status = 'green';
}

and in the css file

#JAAL-ResultButton[status="green"]{
list-style-image: url("chrome://sample/skin/green.png");
height: 28px;
width: 6px;
}

#JAAL-ResultButton[status="red"]{
list-style-image: url("chrome://sample/skin/red.png");
height: 28px;
width: 6px;
}

The problem is that when I use the status tag the toolbar does not
show any image at all. When I remove the status tag, the toolbar shows
a green star. Is there some change I need to do in the xul file if I
add the status tag to the #JAAL-ResultButton button? Currently the xul
file has

<toolbarbutton id="JAAL-ResultButton" label="Analysis Result"
class="menu" oncommand="TutTB_CaptureURL(event)"/>

Thanks in advance for your time,
-A

[Neil]

newbiegalore wrote:

> jaalstar.status = 'green';
>
"arc" suggested using attributes; use .setAttribute to set attributes.

--
Warning: May contain traces of nuts.

[newbiegalore]

Exactly. The problem is fixed now..thanks guys :-)