Mixable small and large icons

[Shadowcat]

I like Phoenix's toolbar customisation lots, but the inability to mix small and large icons is annoying. I want the standard navigation icons and the Quick Prefs icon to be large (the small ones are too small for me to hit quickly with the mouse), but I also want to be able to put the less-frequently-used icons of some of the extensions I use (such as Digger and the Style Sheet chooser) on the navigation toolbar without losing as much horizontal space as I do.

With two large icons for those extensions along with the search box, the URL address bar starts to get really small. It doesn't sound like much, but being able to make those two icons small would add a useful number of characters back to the size of the address bar.

I notice that the "Go" button is small regardless of whether or not you specify small icons, so it seems that the ability to mix different-sized icons is already implemented (unless there's a copy of the small "Go" icon that's named as if it were a large icon? (*)) and so I'm hoping that enabling this functionality is simply a matter of providing the user interface options?

I was thinking that the "Use small icons" checkbox could become a drop-list with the following options:
- Use large icons
- Use small icons
- Use large or small icons

and when the third option is selected, then both small and large versions of all icons are displayed for dragging.

This would also allow me to add small icons to the bookmark toolbar for an acceptably small increase in vertical size, as opposed to the vast amount of space taken up by putting a large icon in there.


(*) If it turns out that this is the case, then could someone tell me how I can modify an extension and replace its large icons with its small ones in order to get the same behaviour as the "Go" button?


p.s. On a related note, if someone could tell me how to control the width of the toolbar search box, that would also be greatly appreciated!

[alanjstr]

could someone tell me how I can modify an extension and replace its large icons with its small ones in order to get the same behaviour as the "Go" button?

I'm not sure how to package it (make the jar, xpi, etc), but I know that they are openable via a standard zip program (winzip/gzip). I don't know if it's possible to specify an image not in the package, ie a URI not chrome://, but I don't see why not. In which case all you would need would be the image and userChrome.css.

I hope that made sense.

[cheeaun]

On a related note, if someone could tell me how to control the width of the toolbar search box, that would also be greatly appreciated!

Try adding this to your userChrome.css:

Code: Select all

#search-bar {
width: 12em !important;
/*change this to smaller values, if you want*/
}

[Shadowcat]

Thank you both!!

I'm still hoping my suggestion makes it into the Phoenix TODO list, but you've solved my immediate issues :)

That userChrome.css worked a treat for shrinking the Search Bar, and I was able to modify the .jar files very easily to do what I wanted. e.g.:

% cd phoenix/chrome/
% cp digger.jar ../
% mkdir tmp
% cd tmp
% unzip ../digger.jar

Then:
* load skin/classic.digger/digger.css into your text editor
* remove all the default "#digger-button" lines
* remove "toolbar[iconsize="small"] " from the small button equivalents
(i.e. we've now made small buttons the default)
* save the file

% zip -r digger.jar *
% mv digger.jar ../

et voila :)

Thank you again!

[Shadowcat]

of course it occurs to me immediately after posting that last reply, that this is what userChrome.css is for! No need to modify the .jar files at all (which is what alanjstr was telling me, but I was too daft to notice :)

So you just find the CSS you want to change...

% unzip -p digger.jar skin/classic/digger/digger.css
(or open the .jar file in WinZip or equivalent and open the .css file from inside the zip browser)

...and then paste the modified (as in my previous reply) small button lines into userChrome.css (with the <b>!important</b> suffix added to each line that didn't already have it) and that's all you need to do!

Brilliant... I love this :)

[alanjstr]

...and then paste the modified (as in my previous reply) small button lines into userChrome.css (with the <b>!important</b> suffix added to each line that didn't already have it) and that's all you need to do!

And when the skin itself is updated (to add new buttons, etc), you don't have to repeat the whole process.

[MXN]

See <a href="http://bugzilla.mozilla.org/show_bug.cgi?id=172517" title="NEW: Per-toolbar button size/type settings">Bug 172517</a>.

[Shadowcat]

And when the skin itself is updated (to add new buttons, etc), you don't have to repeat the whole process.

Quite. (Hence the forehead thwacking that entailed when I cottoned on :)

MXN: thanks for that bug link... not especially encouraging as far as my hopes for UI controls for mixing sizes on a single toolbar go, but certainly an improvement on the current arrangement.

I had another thought on a possible interface for doing what I wanted, which was simply to provide a context menu for toolbar buttons when in customise mode, and being able to select the size for the selected icon from that menu. Perhaps there could be some visual indication that an icon is not at its containing toolbar's default size (a coloured border, perhaps). That would be cleaner than my initial thought (and especially if we're moving towards having many more icon sizes available!!)

[rbrimhall]

this works as well ...

/* ::::: QuickPrefs ::::: */
#qpmenu-button {
list-style-image: url("chrome://quickprefs/skin/qpm-menu-small.png") !important;
-moz-image-region: rect(0px 28px 25px 0px) !important;
}
#qpmenu-button:hover {
-moz-image-region: rect(0px 56px 25px 28px) !important;
}
#qpmenu-button:hover:active,
#qqpmenu-button[checked="true"] {
-moz-image-region: rect(0px 112px 25px 84px) !important;
}
#qpmenu-button[disabled="true"] {
-moz-image-region: rect(0px 96px 25px 72px) !important;
}

/* ::::: Digger ::::: */
#digger-button {
list-style-image: url("chrome://digger/skin/smallbutton.png") !important;
-moz-image-region: rect(0px 25px 25px 0px) !important;
}
#digger-button:hover {
-moz-image-region: rect(0px 53px 25px 28px) !important;
}
#digger-button[disabled="true"] {
-moz-image-region: rect(0px 93px 25px 72px) !important;
}
#digger-button:hover:active,
#digger-button[checked="true"] {
-moz-image-region: rect(0px 109px 25px 84px) !important;
}

/* ::::: CSSMenu ::::: */
#cssmenu-button {
list-style-image: url("chrome://cssmenu/skin/smallbutton.png") !important;
-moz-image-region: rect(0px 25px 25px 0px) !important;
}
#cssmenu-button:hover {
-moz-image-region: rect(0px 53px 25px 28px) !important;
}
#cssmenu-button[disabled="true"] {
-moz-image-region: rect(0px 93px 25px 72px) !important;
}
#cssmenu-button:hover:active,
#cssmenu-button[checked="true"] {
-moz-image-region: rect(0px 109px 25px 84px) !important;
}

/* ::::: Inspectomatic ::::: */
#tbtnInspect {
list-style-image: url("chrome://mozengineer/skin/inspect-small.png") !important;
}
#tbtnInspect[buttondown="true"] {
list-style-image: url("chrome://mozengineer/skin/inspect-small-act.png") !important;
}
#tbtnInspect > .toolbarbutton-menubutton-stack
> .toolbarbutton-menubutton-dropmarker
{
margin-left: 20px !important;
margin-top: 0px !important;
}
toolbar[mode="icons"] #tbtnInspect > .toolbarbutton-menubutton-stack
> .toolbarbutton-menubutton-dropmarker
{
margin-left: 18px !important;
margin-top: 12px !important;
}

Got this from the site of the author of the pinball theme/hack? but don't remember the URL... just giving credit where it is due...

[alanjstr]

You mean David Jame's site?

http://members.rogers.com/dpjames/phoenix/

[rbrimhall]

You mean David Jame's site?

http://members.rogers.com/dpjames/phoenix/

That's the one!

[rbrimhall]

No it's not... wrong person entirely... Phusion theme author... this site:
http://www.uniqueness-template.com/phusion/faq.html#1
sorry