[Ext] Hide Tab Bar 1.0dev.2 [2007-02-10]

Geva Zeichner · Post by **Geva Zeichner** » February 17th, 2005, 3:16 am

Author: Geva Zeichner
Description: Enables you to hide the tab bar.
First release: 2005-02-16
1.0dev.2 release: 2007-02-10

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=gevazeichner%40gmail%2ecom&item_name=Geva%20Zeichner%20%2d%20Hide%20Tab%20Bar%27s%20Development&item_number=MozillaZine&no_shipping=1&cn=Notes&tax=0&currency_code=USD&lc=IL&bn=PP%2dDonationsBF&charset=UTF%2d8" title="Thank you!"><img src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif"></a>

Links:

<a href="https://addons.mozilla.org/firefox/1337/">AMO page</a>
<a href="https://addons.mozilla.org/addcomment.php?aid=1337">Rate on AMO</a>
<a href="http://sourceforge.net/project/showfiles.php?group_id=169638&package_id=206923" title="Use if AMO links don't work">BU server</a>
<a href="viewtopic.php?t=220375&watch=topic" title="Get this topic's updates. Be the first to know when a new version comes out !">Subscribe this topic !</a>

Topic version index:

<a href="viewtopic.php?p=2742074#2742074">1.0dev.2</a>
<a href="viewtopic.php?p=2718534#2718534">1.0dev.1</a>
<a href="viewtopic.php?p=2708061#2708061">1.0dev.0</a>
<a href="viewtopic.php?p=2528165#2528165">0.2.2</a>
<a href="viewtopic.php?p=1920329#1920329">0.2.1</a>
<a href="viewtopic.php?p=1791077#1791077">0.2</a>

---------------------------------------------------------------------------------------------------------------

Version: 0.1
Size: 16KB
Date: 2005-02-16
Tested On: Firefox 1.0
Compatibility: Firefox 0.9 - 1.5

<a href="http://downloads.mozdev.org/hidetabbar/HideTB_0.1.xpi">Install v0.1</a>

Description:
Hi, this is my first extension!

This one will Toggle your Tab Bar via chosen key.
Good when you want some extra pixels on the screen (e.g. for full screen mode)...
You can still switch tabs via keybord when the bar is hidden.

2do:
Put a V in view menu when bar is showed.
Add auto-hide capabilities.
Support all (most) keybord keys.

Notes:
I think A-Z and 0-9 cominations don't work...

so use F1 and what's after F1...

Post by **BenBasson** » February 17th, 2005, 3:24 am

Any chance you can make the tab bar appear by hovering your mouse within a certain number of pixels of the top of the page you're viewing, and auto hide after a defined number of seconds (pref)?

You can counteract the whole "popping up the tab bar moves the page" factor by forcing the page to scroll by the pixel height value of the tab bar when it shows and hides itself.

Basic needs for this:
1) Mousemove event listener attached to webpages.
2) Mouseout event listener on tabs and tabbar to establish if your cursor is still there. Maybe the stop button too.
3) Tab-bar height should be retrieved and used for the range, let's call that h.
4) Preference for auto show/hide, or maybe seperate prefs to give maximum flexibility.
5) Two preferences for delay times (show and hide), with defaults of 500ms and 2000ms.

Method:
1) Coordinates from mousemove listener trigger an additional function if the x coordinate value is less than or equal to h.
2) If an autoshow pref is set, the tab bar should appear after s seconds, assuming that the cursor is still in the right place.
3) Page should scroll up h pixels when the tab bar appears.
4) Page should scroll down h pixels when the tab bar hides.
5) After c seconds, the tabbar should automatically close.

Geva Zeichner · Post by **Geva Zeichner** » February 17th, 2005, 5:08 am

Yeh, I've already thought about it... I'm planing to add it in the next versions.... I'll probebly have a look in that extension that auto-hides the sidebar...
Thanks for the info! I'm sure it will come in handy when I'll work on it...
But first, how long does it take mozdev to setup a new project?! I feel so homeless...

Parkotron · Post by **Parkotron** » February 17th, 2005, 8:53 am

Excellent. I'd been thinking about requesting this for a while. I love tabs, but they sure eat up a lot of screen real-estate and are pretty unattractive in fullscreen mode. Thanks.

Parkotron · Post by **Parkotron** » February 17th, 2005, 10:28 am

Bug:

No checkmark appears next to the Tab Bar entry in the View Menu when tab bar is visible. Should behave the same as Status Bar entry.

Post by **BenBasson** » February 18th, 2005, 5:40 am

I forgot to mention, the reason I allowed for a 500ms delay before opening the tab bar is to allow people to click hyperlinks or select text/images that would appear underneath the tab bar if it immediately appeared and the page scrolled to compensate.

It might be an idea to build in a check to make sure that the user hasn't selected text and that the context menu isn't open, since having the tab bar appear may not be desirable under those circumstances. There may be others that I haven't considered yet, too.

Geva Zeichner · Post by **Geva Zeichner** » February 21st, 2005, 1:08 pm

errr I need help...!

Any tips you can give me about setTimeout will help a lot!

I already succeded in making the bar auto hide and show. When you leave the toolbars area, to the page, it waited for 1000ms and hidden the tab bar. BUT, if during the one sec, you've went back to the bars area it hidden the bar anyway (untill you moved it again within the bars area, resulting in a short flash of hide and show). SO I tried to mess with it and change more stuff, but now it doesn't do it at all, every time I put the setTimeout back in the code it gets stuck after playing with the mouse a little.
I think that I just need to know more about how setTimeout works, and also about addEventListener.
Just tips and basics will do the trick for me, I hope...

Thanks in advance!
JK.

Post by **BenBasson** » February 21st, 2005, 4:37 pm

This should help with setTimeout:

Code: Select all

// Sets timeout and assigns to variable (remember to choose an appropriate scope)
var myTimeout = window.setTimeout(someFunction,1000);

// Is executed after 1000ms
function someFunction ()
{
  // foo
}

// Cancels the timeout
function someOtherFunction()
{
  if (some condition)
    window.clearTimeout(myTimeout);
}

...and this for addEventListener

Code: Select all

// Pick an object, any object.
var object = window; // or any element
var anEvent = "click"; // or any valid event type (i.e. "click", "mouseover")

// Give it an event listener (setting the third parameter to true should capture the event, allowing someFunction to cancel it or manipulate it before any others further down the hierachy)
object.addEventListener(anEvent,someFunction,false);

function someFunction ()
{
  // foo
}

function allDone ()
{
  object.removeEventListener(anEvent,someFunction,false);
}

Any questions? Feel free to ask. You'll find the Gecko DOM Reference to be an invaluable guide, as well as XULPlanet.

Geva Zeichner · Post by **Geva Zeichner** » February 22nd, 2005, 8:38 am

Thanks!
What would be an *appropriate* scope?

And I've noticed that in this code, the person used multiple event listeners and sometimes referring to window or document etc. What could be the reason?

Code: Select all

function mtSidebarStartup() {
  getBrowser().addEventListener("mousemove", mtMouseMoveListener, false);
  mtSidebarBox.addEventListener("mouseover", mtPrepareHideSidebar, false);
  mtSidebarBox.addEventListener("mousemove", mtSidebarMouseMoveListener, false);
  document.getElementById("sidebar-splitter").addEventListener("click", mtPreventHiding, true);
  document.getElementById("navigator-toolbox").addEventListener("mouseover", mtPreventHiding, true);
  window.addEventListener("mousedown", mtMouseStateListener, true);
  window.addEventListener("mouseup", mtMouseStateListener, true);
  window.addEventListener("blur", mtMouseStateListener, true);
  window.addEventListener("focus", mtMouseStateListener, true);

Ihoss · Post by **Ihoss** » February 22nd, 2005, 9:10 am

What I really want is a tab drawer whre you can put lots of tabs and then it will drop down when you click on it so you can select the tab you want. Kinda like a a folder for your tabs.

Post by **BenBasson** » February 22nd, 2005, 9:59 am

jk2003 wrote:What would be an *appropriate* scope?

Well, if you want to add a listener in one function and cancel it in another, you might want to define the variable in the global scope first, otherwise it wouldn't work, due to local variables being forgotten when a function finishes. You could also achieve this by passing parameters, but it would get messy.

If you take a look at my Context Highlight extension, you'll see how I use a 'struct' code layout to contain each of my sub functions and "global" variables. I'd say that this is the tidiest way of achieving things by far, and avoids conflict with any other code.

jk2003 wrote:And I've noticed that in this code, the person used multiple event listeners and sometimes referring to window or document etc. What could be the reason?

It looks like the person wanted to trap multiple events to the same function, which requires multiple event listeners on the same element. When you trigger a function via an event listener, the event is passed as the single parameter that the function can recieve. For example:

Code: Select all

object.addEventListener("mouseover",someFunction,true);
object.addEventListener("click",someFunction,true);

function someFunction (aEvent)
{
  if (aEvent.type == "click")
    alert("Ouch!");

  if (aEvent.type == "mouseover")
    alert("Get that thing off of me!");

  if (you want to cancel the event before it bubbles to parent elements)
    aEvent.preventDefault();
}

If you leave the third parameter as 'false', then the event would not be "blocked" by the preventDefault() method (at least, I think that is how it works).

Ihoss, I like your idea. I'm not sure if it'd be appropriate to this extension, but it has potential as a toolbar button with a dropdown menu or suchlike.

Geva Zeichner · Post by **Geva Zeichner** » February 23rd, 2005, 7:26 am

YEEEES!!!!!! I've got it! Finally it works like I wanted it to!
I'll release v0.2 very soon. I'll just add some more functionality (now when I've succeded to do a basic hide-after-delay, with no bugs), and then I'll release.

Geva Zeichner · Post by **Geva Zeichner** » February 23rd, 2005, 7:44 am

Oh, is there a way to check if myTimeout contains an active timer in it? I'm currently using a 'triggered' variable to determine that, but it would be much nicer and cleaner without it.

Post by **BenBasson** » February 23rd, 2005, 12:55 pm

I have no idea. If it doesn't, then you could try setting the variable to false or null immediately after it is cancelled. This is a great advantage of languages that don't require specific datatypes. for example:

Code: Select all

function cancelTimer ()
{
  window.clearTimeout(myTimeout);
  myTimeout = false;
}

function checkTimer ()
{
  if (myTimeout)
  {
    // foo
  }
  else
  {
    // bar
  }
}

The myTimeout variable should give you the boolean result that you want.

Post by **BenBasson** » March 2nd, 2005, 8:08 pm

jk2003 wrote:I'll release v0.2 very soon.

How's the dev going? I'm looking forward to this one, since it was something I originally planned to make but didn't have time to start.

[Ext] Hide Tab Bar 1.0dev.2 [2007-02-10]

[Ext] Hide Tab Bar 1.0dev.2 [2007-02-10]

heeeelp