Changing toolbar image with JavaScript

[Dave Teare]

Hi all,

Up until today I used CSS to define the image of my main toolbar button:

#mytoolbarbutton
{ list-style-image: url("chrome://myapp/skin/icons/icon24.png");
toolbar[iconsize="small"] #mytoolbarbutton
{ list-style-image: url("chrome://myapp/skin/icons/icon16.png"); }

This worked fine, and the toolbar[iconsize="small"] worked like a charm.

I want to use JavaScript to customize the icon programatically, and I
have it mostly working. The only problem is that I need to know how
to access the "toolbar" object that was used in CSS. I simply want
to see if the user has decided to use small icons, then I need to
change the image accordingly.

Any ideas how to do this in JS? I can alert the "toolbar" object,
but "toolbar.iconsize] is undefined.

Thanks for the help!

Cheers!
--Dave.

[Myk Melez]

Dave Teare wrote:

> I can alert the "toolbar" object, but "toolbar.iconsize] is undefined.

I think you want toolbar.getAttribute("iconsize") instead.

-myk

[eric...@yahoo.com]

Your sample:
toolbar[iconsize="small"]
uses CSS selectors. Selectors are not Mozilla-specific. Read up about them... you'll be glad that you did.

Dave Teare wrote:

-myk
_______________________________________________
dev-extensions mailing list
dev-ext...@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-extensions

[Dave Teare]

Thanks for the idea, but this code:

alert(toolbar.getAttribute("iconsize"));

throws an exception "TypeError: toolbar.getAttribute is not a function".

Am I doing something boneheaded? Maybe I need more JS imports in my
XUL; I tried adding this one to no avail:

<script type="application/x-javascript" src="chrome://global/content/
customizeToolbar.js"/>

Thanks!
--Dave.

[Dave Teare]

I know a fair amount about selectors from my website design, but I'm
certainly no expert.

Mozilla is the only one I know of that uses JS variables inside CSS,
but it is still magical to me on how it works.

For instance, how do I know which JS variables are available to me?
I only know of toolbar b/c of a tutorial.

Cheers!
--Dave.

On 23-Jan-07, at 10:05 PM, eric...@yahoo.com wrote:

> Your sample:
> toolbar[iconsize="small"]
> uses CSS selectors. Selectors are not Mozilla-specific. Read up
> about them... you'll be glad that you did.
>
>
> ----- Original Message ----
> From: Myk Melez <m...@mozilla.org>
> To: dev-ext...@lists.mozilla.org
> Sent: Tuesday, January 23, 2007 9:07:21 PM
> Subject: Re: Changing toolbar image with JavaScript
>

[Brian King]

On 24/01/2007 05:03 (CET), Dave Teare wrote:
> Thanks for the idea, but this code:
>
> alert(toolbar.getAttribute("iconsize"));
>
> throws an exception "TypeError: toolbar.getAttribute is not a function".

By toolbar, Myk meant generically. What you have to do is get the right
toolbar first. Try:

var tb = document.getElementById("toolbarid");
var is = tb.getAttribute("iconsize");

Replace "toolbarid" with the correct value for your toolbar. If it is
the Firefox nav toolbar for example, the value will be
"navigator-toolbox" (the toolbox wrapper).

--
Brian King
www.mozdev.org - free project hosting for the Mozilla community

[Neil]

Dave Teare top-posted:

> On 23-Jan-07, at 10:05 PM, eric...@yahoo.com wrote:
>
>> Your sample:
>> toolbar[iconsize="small"]
>> uses CSS selectors. Selectors are not Mozilla-specific. Read up
>> about them... you'll be glad that you did.
>

> I know a fair amount about selectors from my website design, but I'm
> certainly no expert.
>
> Mozilla is the only one I know of that uses JS variables inside CSS,
> but it is still magical to me on how it works.
>
> For instance, how do I know which JS variables are available to me?
> I only know of toolbar b/c of a tutorial.

toolbar[iconsize="small"] #mytoolbarbutton

{ list-style-image: url("chrome://myapp/skin/icons/icon16.png"); }

means, that if your <toolbarbutton id="mytoolbarbutton"> is inside a
<toolbar iconsize="small"> then use the other graphic. The magic of this
is, that you don't have to know when or how the iconsize gets set. The
best way to customise your button is to add your own attributes. For
instance, you could use
document.getElementById("mytoolbarbutton").setAttribute("custom",
"true"); and then your button would match the rules
#mytoolbarbutton[custom="true"] {
{ list-style-image: url("chrome://myapp/skin/icons/custom24.png"); }
toolbar[iconsize="small"] #mytoolbarbutton[custom="true"] {
{ list-style-image: url("chrome://myapp/skin/icons/custom16.png"); }
as appropriate so if the toolbar iconsize is small then it will
automatically switch to the small custom icon.

--
Warning: May contain traces of nuts.

[Dave Teare]

Thanks!

I was confused b/c there is a toolbar JS object that I thought was
the main navigation bar. Once I changed the code to get the "nav-
bar" element, everything worked fine.

Thanks for all the help everyone!

--Dave.

[Mark Finkle]

Just clarify: Those are not JS variables. They are just attributes on
the <toolbar> element.

Mark Finkle