MozillaZine

[Ext] Unified Back-/Forward Button 0.6 [Aug 25]

Announce and Discuss the Latest Theme and Extension Releases.
Branstrom

User avatar
 
Posts: 97
Joined: March 16th, 2004, 9:45 am
Location: Sweden

Post Posted March 13th, 2006, 1:27 pm

jj44 wrote:customize the toolbar and add the button (took me a while too ;) )


Thanks ;)

old zeniko
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted March 13th, 2006, 3:50 pm

FireManiac wrote:Could you make this compatible with iPox?

To get the desired effect, add <a href="data:text/css,%2F*%20Unified%20Back-%2FForward%20Button%20styles%20for%20iPox%20*%2F%0A%0A%23unibafo%20menuitem%5Bquicknav%3D%22true%22%5D%20%7B%0A%09list-style-image%3A%20url(chrome%3A%2F%2Fglobal%2Fskin%2Ficons%2Fchevron.png)%20!important%3B%0A%7D%0A%0A%23unibafo%20%7B%20-moz-appearance%3A%20none%20!important%3B%20%7D%0A%0A%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button%22%5D%20%7B%0A%09-moz-image-region%3A%20rect(0px%2032px%2032px%200px)%20!important%3B%0A%7D%0A%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button%22%5D%3Ahover%20%7B%0A%09-moz-image-region%3A%20rect(96px%2032px%20128px%200px)%20!important%3B%0A%7D%0A%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button%22%5D%3Anot(%5Bdisabled%3D%22true%22%5D)%3Ahover%3Aactive%20%7B%0A%09-moz-image-region%3A%20rect(32px%2032px%2064px%200px)%20!important%3B%0A%7D%0A%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button%22%5D%5Bdisabled%3D%22true%22%5D%20%7B%0A%09-moz-image-region%3A%20rect(64px%2032px%2096px%200px)%20!important%3B%0A%7D%0A%0A%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button2%22%5D%20%7B%0A%09-moz-image-region%3A%20rect(0px%2064px%2032px%2032px)%20!important%3B%0A%7D%0A%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button2%22%5D%3Ahover%20%7B%0A%09-moz-image-region%3A%20rect(96px%2064px%20128px%2032px)%20!important%3B%0A%7D%0A%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button2%22%5D%3Anot(%5Bdisabled%3D%22true%22%5D)%3Ahover%3Aactive%20%7B%0A%09-moz-image-region%3A%20rect(32px%2064px%2064px%2032px)%20!important%3B%0A%7D%0A%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button2%22%5D%5Bdisabled%3D%22true%22%5D%20%7B%0A%09-moz-image-region%3A%20rect(64px%2064px%2096px%2032px)%20!important%3B%0A%7D%0A%0Atoolbar%5Biconsize%3D%22small%22%5D%20%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button%22%5D%20%7B%0A%09-moz-image-region%3A%20rect(0px%2024px%2024px%200px)%20!important%3B%0A%7D%0Atoolbar%5Biconsize%3D%22small%22%5D%20%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button%22%5D%3Ahover%20%7B%0A%09-moz-image-region%3A%20rect(72px%2024px%2096px%200px)%20!important%3B%0A%7D%0Atoolbar%5Biconsize%3D%22small%22%5D%20%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button%22%5D%3Anot(%5Bdisabled%3D%22true%22%5D)%3Ahover%3Aactive%20%7B%0A%09-moz-image-region%3A%20rect(24px%2024px%2048px%200px)%20!important%3B%0A%7D%0Atoolbar%5Biconsize%3D%22small%22%5D%20%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button%22%5D%5Bdisabled%3D%22true%22%5D%20%7B%0A%09-moz-image-region%3A%20rect(48px%2024px%2072px%200px)%20!important%3B%0A%7D%0A%0Atoolbar%5Biconsize%3D%22small%22%5D%20%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button2%22%5D%20%7B%0A%09-moz-image-region%3A%20rect(0px%2048px%2024px%2024px)%20!important%3B%0A%7D%0Atoolbar%5Biconsize%3D%22small%22%5D%20%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button2%22%5D%3Ahover%20%7B%0A%09-moz-image-region%3A%20rect(72px%2048px%2096px%2024px)%20!important%3B%0A%7D%0Atoolbar%5Biconsize%3D%22small%22%5D%20%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button2%22%5D%3Anot(%5Bdisabled%3D%22true%22%5D)%3Ahover%3Aactive%20%7B%0A%09-moz-image-region%3A%20rect(24px%2048px%2048px%2024px)%20!important%3B%0A%7D%0Atoolbar%5Biconsize%3D%22small%22%5D%20%23unibafo%20%3E%20toolbarbutton%5Banonid%3D%22button2%22%5D%5Bdisabled%3D%22true%22%5D%20%7B%0A%09-moz-image-region%3A%20rect(48px%2048px%2072px%2024px)%20!important%3B%0A%7D%0A">these lines</a> to your userChrome.css or send them to the author of iPox.

Uncle Spellbinder wrote:Unified Back-/Forward Button works in these installed themes for me: ...

Thanks for the note, I've added them to the compatibility list in the first post. For Crystal Dream you might want to add the following line to your userChrome.css to get rid of the "raised button" look when you hover over it:
Code: Select all
#unibafo { -moz-appearance: none !important; }

jj44 wrote:customize the toolbar and add the button (took me a while too ;) )

That's unfortunately pretty impossible to make more discoverable. I've now added an "Installation" section to the first post - hoping that people might see it...

ivanii wrote:It works on Linux, but with Firefox 1.5 and default theme buttons are wider than normal, so toolbar also widens.

Since I've got no Linux box, I won't be able to do anything against this one - unless someone donates the needed CSS. Sorry.

Robert Sekeris wrote:Whilst the name suggested a single icon, it seems in fact to use the Theme buttons, using an equal amount of space as the separate buttons.

Technically, it is just one button - although it looks a lot like two. ;-) In fact, it's just slighly less wide than the original buttons due to the missing second drop-down arrow. If you want, you can however get rid of the less used half of the button through some CSS posted at the very beginning of this thread.

Robert Sekeris wrote:but the edge would be to remove the tails from the arrows and or move the little dropdown button in between - underneath - the 2 tails of the arrows.

To remove the tails, I'd be in need of new graphics for all possible themes... and getting the drop-down arrow between the two button-halves makes it IMO harder to find and harder to hit. If you don't like the drop-down arrow, you could of course hide it completely (as some themes do):
Code: Select all
#unibafo > dropmarker { display: none !important; }

You can then still access the drop-down menu through right-clicking.

Robert Sekeris wrote:Remove the bolded line of present page and sub with a like separation line.

Actually, the highlighted line is easier to understand as "present page" than a separator line would be - and it doesn't look so weird when you're at the beginning or the end of the tab's history (hiding the line would fail to tell you where you are and showing it looks like something's missing).

Branstrom

User avatar
 
Posts: 97
Joined: March 16th, 2004, 9:45 am
Location: Sweden

Post Posted March 13th, 2006, 7:44 pm

Hmm, is there a way to customize the toolbar images via CSS? I'd like to mod my own images in there. Could you perhaps also try and (make an about:config option to) enable left clicking anywhere on the entire button to show the session history? So that it would drop down just like a regular menu. I have a two-axis mousewheel that I use for quick back/forward, so I only need this button for the session history...

I think it looks really nice by default anyways, the menu is also just the way I'd like it :)

old zeniko
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted March 15th, 2006, 1:24 pm

Branstrom wrote:is there a way to customize the toolbar images via CSS?

Of course - all buttons can be customized through CSS. See my post two above or the <a href="jar:jar:http://www.haslo.ch/zeniko/software/unibafo.xpi!/chrome/unibafo.jar!/skin/classic/unibafo/unibafo.css">default styles</a> for inspiration.

Branstrom wrote:Could you perhaps also try and (make an about:config option to) enable left clicking anywhere on the entire button to show the session history?

Currently, you can left-click on any disabled part of the button. Additionally, you can right-click anywhere. Should that not be enough, try adding <a href="data:text/css,%2F*%20Drop-down%20only%20button%20for%20Unified%20Back-%2FForward%20Button%20(default%20theme)%20*%2F%0A%0A%23unibafo%20%3E%20toolbarbutton%20%7B%0Adisplay%3A%20none%20!important%3B%0A%7D%0A%23unibafo%20%3E%20dropmarker%20%7B%0Alist-style-image%3A%20url(chrome%3A%2F%2Fbrowser%2Fskin%2FToolbar.png)%20!important%3B%0A-moz-image-region%3A%20rect(0px%2C%2048px%2C%2024px%2C%200px)%20!important%3B%0A%7D%0A%23unibafo%3Ahover%20%3E%20dropmarker%20%7B%0A-moz-image-region%3A%20rect(24px%2C%2048px%2C%2048px%2C%200px)%20!important%3B%0A%7D%0A%23unibafo%5Bdisabled%3D%22true%22%5D%20%3E%20dropmarker%20%7B%0A-moz-image-region%3A%20rect(48px%2C%2048px%2C%2072px%2C%200px)%20!important%3B%0A%7D%0A">these lines</a> to your userChrome.css (hack inspired by dougeeebear).

AnonEmoose
 
Posts: 2031
Joined: February 6th, 2004, 11:59 am

Post Posted March 15th, 2006, 7:06 pm

zeniko wrote:
jj44 wrote:customize the toolbar and add the button (took me a while too ;) )

That's unfortunately pretty impossible to make more discoverable. I've now added an "Installation" section to the first post - hoping that people might see it...


Complete credit to Wladimir Palant (AdPlockPlus)

slightly modified.....

function YourExtensionInitToolbar() {
var bPrefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
buttonShown = bPrefs.getBoolPref("YourExtension.Button.Shown");
if(buttonShown) return;
if (!document.getElementById("YourExtension-button")) {
var toolbar = document.getElementById("nav-bar");
if (toolbar && "insertItem" in toolbar) {/*taken from adblockplus*/
toolbar.insertItem("YourExtension-button", document.getElementById("urlbar-container"), null, false);
toolbar.setAttribute("currentset", toolbar.currentSet);
document.persist("nav-bar", "currentset");
}
}

bPrefs.setBoolPref("YourExtension.Button.Shown", true);
}

window.addEventListener("load", YourExtensionInitToolbar, false);



default pref
/*Toolbar Button Shown Before */
pref("YourExtension.Button.Shown", false);

ivanii

User avatar
 
Posts: 444
Joined: July 23rd, 2004, 9:01 am
Location: Serbia, Belgrade

Post Posted March 16th, 2006, 12:17 pm

ivanii wrote:It works on Linux, but with Firefox 1.5 and default theme buttons are wider than normal, so toolbar also widens.

Is there a fix with userChrome.css? The unifed button is just too tall, probably some setting could override it.
Get ready for revolutionary File manager!

dougeeebear

User avatar
 
Posts: 548
Joined: September 15th, 2005, 4:17 pm

Post Posted March 16th, 2006, 7:23 pm

Neat idea for back/forward buttons, but I'm using my own hack for replacing the dropdown markers with icons.
You were discussing tooltips a few posts back.
The default Firefox dropdown history tooltips display whatever was displayed on the previous tooltip from wherever ( a bug I guess).
Is there a way to make Firefox display the correct dropdown history tooltips (or else none at all) through css or something?
I've tried everything I can think of and so far nothing has worked either way.

Branstrom

User avatar
 
Posts: 97
Joined: March 16th, 2004, 9:45 am
Location: Sweden

Post Posted March 17th, 2006, 12:04 am

I'd like it to display "Back: 3, Forward: 1" as a tooltip for the dropmarker, maybe that could be possible, dunno.

Right now I'm using this modified toolbar.png, with a reload-style rotated icon for the session history: http://filer.brnm.se/i/Toolbar.png, I put it in classic.jar (but you could modify the URL and put it anywhere else of course) and then used this CSS, basically the same as posted earlier, courtesy of dougeeebear, but modified to just have one image present, with the history on left click.

Code: Select all
#unibafo > toolbarbutton {
   display: none !important; }
#unibafo > dropmarker {
   list-style-image: url(chrome://browser/skin/Toolbar.png) !important;
   -moz-image-region: rect(0px, 24px, 24px, 0px) !important; }
#unibafo:hover > dropmarker {
   -moz-image-region: rect(24px, 24px, 48px, 0px) !important; }
#unibafo[disabled="true"] > dropmarker {
   -moz-image-region: rect(48px, 24px, 72px, 0px) !important; }


The stop and reload buttons are also just a little desaturized to better suite my taste, barely noticeable.

It looks beautiful:
http://filer.brnm.se/i/060317-sessionhistory.png
http://filer.brnm.se/i/060317-sessionhistory-load.png
http://filer.brnm.se/i/060317-sessionhistory-menu.png

old zeniko
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted March 18th, 2006, 3:14 am

ivanii wrote:Is there a fix with userChrome.css? The unifed button is just too tall, probably some setting could override it.

zeniko wrote:Since I've got no Linux box, I won't be able to do anything against this one - unless someone donates the needed CSS. Sorry.

Posting a screenshot of how it looks like and how you'd like it to look might definitively help...

AnonEmoose wrote:
zeniko wrote:
jj44 wrote:customize the toolbar and add the button (took me a while too ;) )

...
Complete credit to Wladimir Palant (AdPlockPlus)
...

Thanks for the offer, but that's almost as much code as the rest of the extension consists of. ;-) And I not only wasn't happy with Wladimir's decision in his case (unwanted icons suddenly invading my neatly cleaned up toolbar), but in the case of my extension I'd also have to make sure that the original Back and Forward buttons are correctly removed. Too much of a hassle for an extension which won't be that widely used.

Branstrom wrote:I'd like it to display "Back: 3, Forward: 1" as a tooltip for the dropmarker, maybe that could be possible, dunno.

Almost nothing's impossible - but that doesn't mean that I'll implement it. During the time you wait for the tooltip to appear, you could just as easily hit the right mouse button and have a look for yourself. If you really need that information, I recommend you to rather post a request for an extension adding this information to the status bar (where you see it at once).

Branstrom wrote:It looks beautiful:
http://filer.brnm.se/i/060317-sessionhistory.png

It does indeed.

As for the button's icon, why not use smaller left/right arrows instead of a circular one:
Code: Select all
 ---
|<= |
| =>|
 ---

Anyway, you might want to post the images of just the Back/Forward button here (instead of the whole toolbar). These images can then easily be used by copying them to the profile's chrome folder and adding a reference to them to userChrome.css (no hacking required).

dougeeebear

User avatar
 
Posts: 548
Joined: September 15th, 2005, 4:17 pm

Post Posted March 18th, 2006, 9:29 am

@Branstrom :
I've implemented your code, modified to use a different icon.

@zeniko:
On implementation of Branstrom's button idea, there is only one icon, therefore no toolbar tooltip for it (I am using my own modified icon in the chrome folder).
It used to say "Go back one page" and "Go forward one page" for the two buttons respectively.

If possible, I would like it to say "Tab History" for the single button setup.
Is there a way to create such a tooltip for it with css?

Branstrom

User avatar
 
Posts: 97
Joined: March 16th, 2004, 9:45 am
Location: Sweden

Post Posted March 18th, 2006, 1:41 pm

Can the buttons be layed out on top of each other, so the disabled state could be showed for either button? I'd like to have this:

Image

But then the left click to show the menu would be gone... maybe you could hack that into the extension? Just as an option?

Edit: Maybe I could just CSS-hack it.

old zeniko
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted March 18th, 2006, 2:21 pm

dougeeebear wrote:If possible, I would like it to say "Tab History" for the single button setup.
Is there a way to create such a tooltip for it with css?

None that I know of. If you absolutely want this, you'll have to modify the file unibafo.xml and add the attribute tooltiptext="Tab History" right after class="toolbarbutton-menubutton-dropmarker" (ugly hack :-().

Branstrom wrote:Can the buttons be layed out on top of each other, so the disabled state could be showed for either button?

Sure. Add <a href="data:text/css,%2F*%20Drop-down%20only%20button%20for%20Unified%20Back-%2FForward%20Button%20(default%20theme)%20*%2F%0A%0A%23unibafo%20%3E%20toolbarbutton%20%7B%0A%09display%3A%20none%20!important%3B%0A%7D%0A%23unibafo%20%3E%20dropmarker%20%7B%0A%09list-style-image%3A%20url(chrome%3A%2F%2Fbrowser%2Fskin%2FToolbar.png)%20!important%3B%0A%09-moz-image-region%3A%20rect(0px%2C%2048px%2C%2024px%2C%200px)%20!important%3B%0A%7D%0A%23unibafo%5Bdisabled1%3D%22true%22%5D%20%3E%20dropmarker%20%7B%0A%09-moz-image-region%3A%20rect(0px%2C%2048px%2C%2024px%2C%2024px)%20!important%3B%0A%7D%0A%23unibafo%5Bdisabled2%3D%22true%22%5D%20%3E%20dropmarker%20%7B%0A%09-moz-image-region%3A%20rect(0px%2C%2024px%2C%2024px%2C%200px)%20!important%3B%0A%7D%0A%23unibafo%3Ahover%20%3E%20dropmarker%20%7B%0A%09-moz-image-region%3A%20rect(24px%2C%2048px%2C%2048px%2C%200px)%20!important%3B%0A%7D%0A%23unibafo%5Bdisabled1%3D%22true%22%5D%3Ahover%20%3E%20dropmarker%20%7B%0A%09-moz-image-region%3A%20rect(24px%2C%2048px%2C%2048px%2C%2024px)%20!important%3B%0A%7D%0A%23unibafo%5Bdisabled2%3D%22true%22%5D%3Ahover%20%3E%20dropmarker%20%7B%0A%09-moz-image-region%3A%20rect(24px%2C%2024px%2C%2048px%2C%200px)%20!important%3B%0A%7D%0A%23unibafo%5Bdisabled%3D%22true%22%5D%20%3E%20dropmarker%20%7B%0A%09-moz-image-region%3A%20rect(48px%2C%2048px%2C%2072px%2C%200px)%20!important%3B%0A%7D%0A">these lines</a> to your userChrome.css and adapt them to your own image(s).

Branstrom wrote:But then the left click to show the menu would be gone... maybe you could hack that into the extension? Just as an option?

Why would I want to add such ugly hacks to my extensions? Anyway, the CSS I gave you above preserves the left-clicking hack you already use.

dougeeebear

User avatar
 
Posts: 548
Joined: September 15th, 2005, 4:17 pm

Post Posted March 18th, 2006, 3:01 pm

zeniko wrote:None that I know of. If you absolutely want this, you'll have to modify the file unibafo.xml and add the attribute tooltiptext="Tab History" right after class="toolbarbutton-menubutton-dropmarker"

That didn't seem to do it, but I'll keep playing around with it.

EDIT:
I have it working now.
It had to go in the file unibafo.xul right after
class="toolbarbutton-1 chromeclass-toolbar-additional"

naderi
 
Posts: 1
Joined: June 20th, 2004, 10:55 am

Post Posted March 19th, 2006, 8:57 pm

I use Azerty III v2, could you make this excellent extension compatible with this?

old zeniko
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted March 20th, 2006, 12:22 pm

dougeeebear wrote:It had to go in the file unibafo.xul right after
class="toolbarbutton-1 chromeclass-toolbar-additional"

Sorry for that mis-information. I didn't know that dropmarkers couldn't have their own tooltip. With your solution, you simply set the tooltip for the whole double-button (no matter which parts are visible).

naderi wrote:I use Azerty III v2, could you make this excellent extension compatible with this?

<a href="http://www.haslo.ch/zeniko/software/unibafo.xpi">Version 0.4</a> should display mostly alright for almost all themes. To get the details correct, please ask the author of the theme or other users (in a themes specific forum) for help.

Return to Extension/Theme Releases


Who is online

Users browsing this forum: No registered users and 6 guests