Toolbar Customization

renjupkr · Post by **renjupkr** » August 16th, 2006, 2:07 am

Hi

I have some questions.

1) How can I add my toolbar extension to the "Customizable Toolbar" list ? so that I drag and drop this toolbar.

2) When I customize the toolbar, and select "Show Icons only" my toolbar buttons removes the text in the buttons
but it does not reduce the width of the button. It shows the icon only in the middle of the button. How can I reduce
the widh when a user selects this option?

Thanks in advance
Ren

Old Michael Buckley · August 16th, 2006, 3:49 am

The answer to question on is to add this to the toolbar tag I think.

Code: Select all

customizable="true" context="toolbar-context-menu"

renjupkr · Post by **renjupkr** » August 16th, 2006, 4:31 am

Hi

my toolbar already has it as follows

<toolbar id="My-Toolbar"
accesskey="T"
context="toolbar-context-menu"
toolbarname="MyExt"
hidden="false"
persist="hidden"
height="26"
class="chromeclass-toolbar-additional"
iconsize="small"
customizable="true"
crop ="end" >

But I can not see it in the customizable

renjupkr · Post by **renjupkr** » August 17th, 2006, 10:25 pm

Hi

could someone give any idea on this?

Ren

max1million · Post by **max1million** » August 17th, 2006, 11:24 pm

In the css for your button
min-width:10px;

Or on button in xul
style="min-width:10px;"

perhaps?

renjupkr · Post by **renjupkr** » August 21st, 2006, 5:42 am

Hi
I tried this. But still doesnt work.
I mean when i select "Show Icons only" it removes the text.
but does not reduce the width.

Thanks.
Ren

max1million · Post by **max1million** » August 21st, 2006, 10:21 pm

You may want to wrap your toolbar in a toolbaritem and add it to the BrowserToolbarPalette, if you wnt to drag and drop toolbar like toolbarbutton (toolbaritem).

Code: Select all

<toolbarpalette id="BrowserToolbarPalette">
    <toolbaritem id="My-Toolbar-items" align="center">
       <toolbar id="My-Toolbar">

And create a class in the css to use on your toolberbuttons, after the other classes

Code: Select all

.mybuttons {
min-width: 20px !important;
max-width: 60px !important;
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
}

toolbar[mode="icons"][iconsize="small"] .mybuttons {
width: 20px !important
}

The !important may or may not be needed. It'll likely need more work but it's a general idea.

renjupkr · Post by **renjupkr** » August 23rd, 2006, 3:52 am

thanks. I am working on this. It seems lots of things have to be changed in my xul.
I have wrapped toolbarbutton with toolbaritem everywhere which has to be changed first.

max1million · Post by **max1million** » August 23rd, 2006, 9:29 pm

A toolbarbutton is already a toolbaritem. I suggested wrapping the toolbar in toolbaritem cause:

1) How can I add my toolbar extension to the "Customizable Toolbar" list ? so that I drag and drop this toolbar.

Note that was a toolbar not a toolbarbutton. If in Firefox you want to add individual toolbarbutton you can just add it to the <toolbarpalette id="BrowserToolbarPalette">, which is shown in the Customize Toolbar dialog. Otherwise put the toolbar in <toolbox id="navigator-toolbox"> which should add it to the list of toolbars in Firefox.
http://www.xulplanet.com/references/elemref/
http://developer.mozilla.org/en/docs/Cr ... ar_buttons

renjupkr · Post by **renjupkr** » August 25th, 2006, 3:15 am

Hi

I have changed it as you said. I have given all the buttons
inside the toolbarpalette. And now i can drag and drop my buttons
from and to the list of customizable toolbar buttons.

But the issue here is that the icon which gave for the button is lost,
when I move the buttons to the list of customizable toolbar buttons.

My button is as follows

<toolbarbutton id="mybutton" label="test this button" persist="width" image="" class="toolbarbutton-1" />

And in the css i have given as follows

.mybuttoncls
{
list-style-image: url(chrome://mytoolbar/skin/images/report.png);
min-width: 20px !important;
max-width: 103px !important;
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
}
toolbar[mode="icons"][iconsize="small"] .mybuttoncls
{
list-style-image: url(chrome://mytoolbar/skin/images/report.png);
width: 20px !important
}

In javascript I assign this class to my button as

document.getElementById("mybutton").className = "mybuttoncls";

the image size is 16X16.

Now when I drag this button to the list, I could see the button has a scary icon which is a combination of somany images! huh...
Please help me out of this.

Thanks

max1million · Post by **max1million** » August 25th, 2006, 10:14 am

In chrome.manifest ?

Code: Select all

style   chrome://browser/content/browser.xul   chrome://mytoolbar/skin/mytoolbar.css
style   chrome://global/content/customizeToolbar.xul   chrome://mytoolbar/skin/mytoolbar.css

Here's a small one (a button) you can save and unzip http://www.extensionsmirror.nl/index.php?showtopic=4892 and check out.

Just so you know, you can use more then one class in the xul, just leave a space between them.
class="first second third"

renjupkr · Post by **renjupkr** » August 29th, 2006, 7:35 am

Hi

it worked when, in css, I gave as follows

#button_id{
list-style-image: url("images/xp/norm.png") !important;
}

toolbar[iconsize="small"] #button_id{
list-style-image: url("images/xp/smaller.png") !important;
}

But my toolbar has got its own themes. I can dynamically
change my themes from my toolbar option window.
I use different classes for different themes.
And i change the button classname when my toolbar loads.

So i want my actual css as follows

////////////////////////////////////////////////////////
.button_xp{
list-style-image: url("images/xp/norm.png") !important;
}

toolbar[iconsize="small"] .button_xp{
list-style-image: url("images/xp/smaller.png") !important;
}

.button_default{
list-style-image: url("images/def/norm.png") !important;
}

toolbar[iconsize="small"] .button_default{
list-style-image: url("images/def/smaller.png") !important;
}

////////////////////////////////////////////////////////

and i need to change the button classname as follows.

var style = findtheme();

document.getElementById('button_id').className = "button_"+style;

But here my custromization doesnt work. the icon shown in the customization list
is not proper.
I hope you have understood the scenario. i.e. if I change the class name dynamically
there seems to be some problem.

Ren

max1million · Post by **max1million** » August 29th, 2006, 2:29 pm

Does it work for the toolbars? If yes perhaps your updating

Code: Select all

<window id="main-window"
</window>

but not getting the Customize Toolbar dialog that's seperate. Probably have to overlay it to run script and update it onload. Some things to look at:

chrome://global/content/customizeToolbar.xul

Code: Select all

<window id="CustomizeToolbarWindow" title="Customize Toolbar" onload="onLoad();"
        onunload="onUnload();" onclose="onAccept(); return false;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="chrome://global/content/customizeToolbar.js"/>
  <script type="application/x-javascript" src="chrome://global/content/nsDragAndDrop.js"/>
  <script type="application/x-javascript" src="chrome://global/content/nsTransferable.js"/>
  <script type="application/x-javascript" src="customiseOverlay.js"/>
  <script type="application/x-javascript" src="chrome://reporter/content/reporterOverlay.js"/>
</window>

Don't know if that helps any.

renjupkr · Post by **renjupkr** » August 29th, 2006, 9:29 pm

Sorry I did not understand this.

But it works perfectly well, if (in css) I give the style to the button
using button id.

#buttonid{ style ...}

but i want to give the classes for my buttons dynamically.
like .buttonstyle1 {style...}

then it does not.

max1million · Post by **max1million** » August 30th, 2006, 12:41 pm

Can't using mutiple stylesheet with different values for the same class and load the stylesheet of choice with the script, instead of using 1 stylesheet and changing the class, do this? I'm sure i saw that somewhere

base.css -- default and common
style1.css -- non default and different only
style2.css -- non default and different only