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

Announce and Discuss the Latest Theme and Extension Releases.
Locked
User avatar
dougeeebear
Posts: 548
Joined: September 15th, 2005, 4:17 pm

Post by dougeeebear »

zeniko wrote:I didn't know that dropmarkers couldn't have their own tooltip.

So then we both learned something today :)
User avatar
Branstrom
Posts: 97
Joined: March 16th, 2004, 9:45 am
Location: Sweden
Contact:

Post by Branstrom »

zeniko wrote:
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.


Exactly what sprung to mind, thanks for setting up the original CSS.

I saw the disabled1 and -2 before and thought I was going to do it myself, but you beat me to it.

<a href="data:text/css,%23unibafo%20%3E%20toolbarbutton%20%7B%0D%0A%09display%3A%20none%20!important%3B%20%7D%0D%0A%23unibafo%20%3E%20dropmarker%2C%20toolbarbutton%23reload-button%2C%20toolbarbutton%23stop-button%20%7B%0D%0A%09list-style-image%3A%20url(toolbar.png)%20!important%3B%20%7D%0D%0A%0D%0A%23unibafo%20%3E%20dropmarker%20%7B%0D%0A%09margin-left%3A%201px%3B%0D%0A%09-moz-image-region%3A%20rect(0px%2C%2024px%2C%2024px%2C%200px)%20!important%3B%20%7D%0D%0A%0D%0A%23unibafo%5Bdisabled1%3D%22true%22%5D%20%3E%20dropmarker%20%7B%0D%0A%09-moz-image-region%3A%20rect(48px%2C%2048px%2C%2072px%2C%2024px)%20!important%3B%20%7D%0D%0A%0D%0A%23unibafo%5Bdisabled2%3D%22true%22%5D%20%3E%20dropmarker%20%7B%0D%0A%09-moz-image-region%3A%20rect(0px%2C%2048px%2C%2024px%2C%2024px)%20!important%3B%20%7D%0D%0A%0D%0A%23unibafo%3Ahover%20%3E%20dropmarker%20%7B%0D%0A%09-moz-image-region%3A%20rect(24px%2C%2024px%2C%2048px%2C%200px)%20!important%3B%20%7D%0D%0A%0D%0A%23unibafo%5Bdisabled1%3D%22true%22%5D%3Ahover%20%3E%20dropmarker%20%7B%0D%0A%09-moz-image-region%3A%20rect(72px%2C%2048px%2C%2096px%2C%2024px)%20!important%3B%20%7D%0D%0A%0D%0A%23unibafo%5Bdisabled2%3D%22true%22%5D%3Ahover%20%3E%20dropmarker%20%7B%0D%0A%09-moz-image-region%3A%20rect(24px%2C%2048px%2C%2048px%2C%2024px)%20!important%3B%20%7D%0D%0A%0D%0A%23unibafo%5Bdisabled%3D%22true%22%5D%20%3E%20dropmarker%2C%0D%0A%23unibafo%5Bdisabled%3D%22true%22%5D%3Ahover%20%3E%20dropmarker%20%7B%0D%0A%09-moz-image-region%3A%20rect(48px%2C%2024px%2C%2072px%2C%200px)%20!important%3B%20%7D">Here's the final CSS</a> (with a tweak to avoid having the disabled2 hover image for the disabled button... weird...) and the image to use with it:

Image

And this is what it looks like. Just like what I mocked up before.
User avatar
dougeeebear
Posts: 548
Joined: September 15th, 2005, 4:17 pm

Post by dougeeebear »

zeniko,
I am trying to understand how the fast forward/rewind entries actually function.
To me, the history list makes more sense with extensions.unibafo.max_quicknav set to 0.
Could you please explain further how fast forward/rewind works?
And since both entries display the same symbols, which is which?
Thanks.
old zeniko
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by old zeniko »

dougeeebear wrote:I am trying to understand how the fast forward/rewind entries actually function.

If there are too many entries in the menu (i.e. more than extensions.unibafo.max_length), the first and last two (resp. extensions.unibafo.max_quicknav) entries are replaced with fast rewind/forward entries.

A fast rewind/forward entry is the entry for the first page when you entered a new domain - e.g. if you navigate from www.google.com to forums.mozillazine.org and then navigate around in the forums, the first forums.... entry will be displayed. Like this, you can quickly skip all pages from one domain and go back (in the example) to your Google search or forward to wherever you moved from the forums.

All fast rewind/forward entries are in italics and are prepended with a chevron (the symbol you also see when e.g. a toolbar is too wide). Both fast rewind and fast forward entries use the same chevron, since many themes feature only the left-to-right one. You can however tell the difference between fast rewind and fast forward by the position of the entry in the list (above the current page = fast rewind, below = fast forward - in the same way as clicking an entry above the current one goes back in history and clicking one below goes forward).
User avatar
dougeeebear
Posts: 548
Joined: September 15th, 2005, 4:17 pm

Post by dougeeebear »

Thanks for that explanation, zeniko.
It makes more sense now.
User avatar
dougeeebear
Posts: 548
Joined: September 15th, 2005, 4:17 pm

Post by dougeeebear »

I'm trying to use a couple icons in my chrome directory to reflect rewind/fast forward status of their lines respectively.

Code: Select all

#unibafo menuitem[quicknav="true"] {
   font-style: italic;
   list-style-image: url("rewind.png") !important;
}

#unibafo[chromedir="rtl"] menuitem[quicknav="true"] {
   list-style-image: url("fast-forward.png") !important;
}


But they are both using the rewind icon.
Is there no way I can have rewind and fast forward use different icons for their respective lines?
old zeniko
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by old zeniko »

Since there's no way of making a difference between back and forward entries, it's just logical that you can't distinguish fast rewind/forward entries, either... Still, you can achieve what you want with the following CSS:

Code: Select all

#unibafo menuitem[quicknav="true"]:first-child { /* first fast rewind entry */ }
#unibafo menuitem[quicknav="true"]:first-child + menuitem[quicknav="true"] {
  /* second fast rewind entry */
}
#unibafo menuitem[quicknav="true"]:first-child + menuitem[quicknav="true"] + menuitem[quicknav="true"] {
  /* third fast rewind entry */
}
/* and so on (adding each time `+ menuitem[quicknav="true"]´) until you have extensions.unibafo.max_quicknav entries */

Now you can first style the fast forward entries, and then overwrite these styles (partly) with the differences of the fast rewind entries...
User avatar
dougeeebear
Posts: 548
Joined: September 15th, 2005, 4:17 pm

Post by dougeeebear »

zeniko wrote:Since there's no way of making a difference between back and forward entries, it's just logical that you can't distinguish fast rewind/forward entries, either... Still, you can achieve what you want with the following CSS:
...

Neat.. thanks.
User avatar
riowong
Posts: 587
Joined: May 4th, 2005, 1:33 am

Post by riowong »

When I've just upgraded to version 0.4, I found that there's a wide gap in between the two buttons. In the previous version, the gap was not existed which could save spaces from toolbar. I've also added the codes of Fitt's Back Button described above to userChrome.css, but the gap is still existed.

What can I do to shrink the gap in between them? Thx.
old zeniko
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by old zeniko »

riowong wrote:When I've just upgraded to version 0.4, I found that there's a wide gap in between the two buttons.

Could you please post a screenshot of the issue (and inform me about what version of Firefox and what theme you're using)?
User avatar
riowong
Posts: 587
Joined: May 4th, 2005, 1:33 am

Post by riowong »

Yes. I'm using FF 1.5.0.1, and both themes from Noia Lite and Extreme.

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

Post by old zeniko »

I've added one further rule to the Noia specific code in the first post. Should the buttons get too close now, please add the > where indicated to see whether that makes it better and tell me.
User avatar
riowong
Posts: 587
Joined: May 4th, 2005, 1:33 am

Post by riowong »

sorry, I don't get what should I change from the codes that I've added. The codes that I copied from the first page are:

/* Fitt's Back Button - bigger target on the icon-only toolbar */
toolbar[mode="icons"] #unibafo > #back-button {
-moz-box-orient: horizontal !important;
}
toolbar[mode="icons"] #unibafo > #back-button > label {
display: -moz-box !important;
margin: 1px 5px 2px 6px !important;
-moz-margin-start: 6px !important;
-moz-margin-end: 5px !important;
}
old zeniko
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by old zeniko »

Under Theme Specific Code you'll find a line "Noia (Extreme) and derivates" - that's what I meant.
User avatar
riowong
Posts: 587
Joined: May 4th, 2005, 1:33 am

Post by riowong »

Oh ya, they stick together now! Thx! :)
Locked