MozillaZine

Toolbar Customization

Talk about add-ons and extension development.
renjupkr
 
Posts: 38
Joined: June 8th, 2006, 11:15 pm

Post Posted 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
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted 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"
New [url=http://forums.mozillazine.org/profile.php?mode=viewprofile&u=299802:3o1quhg8]Michael Buckley[/url:3o1quhg8] account as old one was lost.

renjupkr
 
Posts: 38
Joined: June 8th, 2006, 11:15 pm

Post Posted 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
 
Posts: 38
Joined: June 8th, 2006, 11:15 pm

Post Posted August 17th, 2006, 10:25 pm

Hi

could someone give any idea on this?

Ren

max1million
 
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post Posted 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
 
Posts: 38
Joined: June 8th, 2006, 11:15 pm

Post Posted 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
 
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post Posted 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
 
Posts: 38
Joined: June 8th, 2006, 11:15 pm

Post Posted 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
 
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post Posted 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
 
Posts: 38
Joined: June 8th, 2006, 11:15 pm

Post Posted 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
 
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post Posted 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
 
Posts: 38
Joined: June 8th, 2006, 11:15 pm

Post Posted 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
 
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post Posted 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
 
Posts: 38
Joined: June 8th, 2006, 11:15 pm

Post Posted 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
 
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post Posted 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

Return to Extension Development


Who is online

Users browsing this forum: No registered users and 0 guests