Show indicator when there are hidden tabs which can be scrolled to

[izuzak]

From @v3ss0n on May 11, 2015 8:17

atom 198 behanvior make tabs more readable but when too many tabs are opened , new ones are hidden. Previously atleast an icon width is still shown.

I propose a solution to add a Next/Back icon at the side of tab strip if too many tabs are opened like in firefox , with additional tablist button.

If i am good with coffeescript i can help.

Copied from original issue: atom/atom#6730

[izuzak]

@v3ss0n When there are lots of tabs opened, the tab bar becomes scrollable so that you can scroll and reach all tabs. Is that what you're referring to as "hidden"? If so, that's expected behavior. Are you suggesting that an indicator is added so that users know that the tab bar can be scrolled to see more tabs?

[v3ss0n]

There is no indicator that tabs are hidden or not , An indicator would be nice, like that arrow at each end of tab in firefox. The button that show buffer list (CTRL + B )should be easy to add as an package.

[izuzak]

Thanks for clarifying. I've modified the issue title to reflect your suggestion, because just the fact that the tabs are hidden is expected behavior.

[v3ss0n]

Thanks , the problem right now is when too many buffers are opened , and even after the opened buffer is selected , it is not actually selected/Activated in tab bar. Tabs are not actually scrolled , only buffer is scrolled. Is that intended ?

[v3ss0n]

To clearify this:

on the right pane ,tab named ui-variables.less is selected , but it is hidden , you can see this by none of the tab is highlighted on the screenshot.
tested at atom 0.199.0-atom/atom@f1f8c3d

Seems like it itself is a bugg , because tab is not actually scrolled and highlighed to the selected buffer.

I will test with --safe to see if it is from atom core.

[izuzak]

@v3ss0n It's intended in the sense that such functionality is not implemented currently, I believe, and not seeing the tab bar scroll automatically doesn't mean that there's a bug in some code.

Also, that sounds like a different request/suggestion than then one described in this issue, so I'd recommend you open a new issue on this package's issue tracker and describe it clearly. Does that sound good? You might also explain in which situations you'd expect the tab bar to show the tab for the active file. For example, what if the tab bar showed the active file and you intentionally scrolled it so that it's not shown? Would you expect the tab bar to scroll back automatically?

[v3ss0n]

It's intended in the sense that such functionality is not implemented currently, I believe, and not seeing the tab bar scroll automatically doesn't mean that there's a bug in some code.

Oh , i thought it was implemented already when you said this:

When there are lots of tabs opened, the tab bar becomes scrollable so that you can scroll and reach all tabs.

It was not visually scrolling ( it is scrolling in the sense of buffer, but not visually scrolled to that portion of then).

But then i tried moving a tab to the hidden part of the tab bar and Voila! it acutally scrolled visually too, so i thought its already implemented and just a bug at visually not updating that.

so I'd recommend you open a new issue on this package's issue tracker and describe it clearly. Does that sound good?

Also that is the reason i commented here . I understand , i will do a separate issue after thinking abit how it should work.

[izuzak]

The tab bar is scrollable, but doesn't scroll automatically when you open a file for which the tab is hidden -- you need to scroll the tab bar yourself. Does that clarify things?

[v3ss0n]

Even if i scrolled (using mousewhell on top tab bar) , only buffer is scrolled , not the tabstrip .

I am making this confusing , i will make a new issue for this case.

For this issue #136 , it would be nice if :

• Indicator for hidden tabs
• When new files are opened and hidden , automatically scroll to them

[izuzak]

Even if i scrolled (using mousewhell on top tab bar) , only buffer is scrolled , not the tabstrip .

Scrolling the tab bar works just fine for me, but I'm not using a mouse -- I'm using a trackpad. Will try using a mouse later.

For this issue #136 , it would be nice if :

Indicator for hidden tabs
When new files are opened and hidden , automatically scroll to them

I'd suggest that we keep this issue focused on the indicator, not on the auto-scroll behavior. For the auto-scroll behavior -- please open a new issue.

[v3ss0n]

Ok i will open auto scroll behavior as new issue too #137 .

[warpdesign]

@izuzak: is the scrolling supposed to work on current Windows build ? When I have too many tabs, if I move my mouse of the tabs area and use the mousewheel, nothing happens. So the only way for me to see hidden tabs is to enlarge the window/pane.

[warpdesign]

I think an indicator should be added that shows when/if there are hidden tabs.

When scrolling a webpage, you usually see the scrollbar which indicates you may scroll. Plus if you don't know shift should be used, you may grab the scroll bar.

If there is no scrollbar, there has to be some hint (an arrow ?) that indicates there are more content, and how to access it. The problem is that right now, there is no visual difference between "enough tabs, no need to scroll", and "more tabs, some are hidden".

For example, when some part has an horizontal layout, no scroll bar, the Netflix websites shows an arrow on mouseover:

Hide the arrow (as it is right now in Atom right now), and you have:

• no indication that there is more (hidden) content
• if you guess there is more content, you have no idea how to access it

[jerone]

I like the idea of a gutter shadow, just like gutter-shadow does for the editor and this PR is going to add for the tool-bar.

[v3ss0n]

Thats very interesting , idea jerone.

[redtopia]

I can't find a way to access tabs that are not displayed when the window is too narrow. There is no tab bar scrollbar and my mousewheel doesn't scroll them. For me, this is a major UI flaw because I tend to have a bunch of tabs open that will fill up my tab bar, and then I use the menu to access the ones I can't see. The best way to deal with this is the way Sublime Text 3 does it... there's a menu of open tabs to the right of all the tabs. Also, there is a minimum tab width that allows you to read most if not all of the filename.

[v3ss0n]

Can we get someone working on it? Core devs are busy with others but this is one of biggest UX flaw as project become complex.

[archfish]

like @redtopia said,need it very much!

[alchn]

A suggestion to add on to this: when I already have many opened tabs, and then I open a new file, the newly opened file tab should be auto-scroll to be visible(instead of hidden in the left/right-side of the tab-bar...).

[v3ss0n]

anyone working or it , any plugin in development?

[willthemoor]

Not exactly the most robust solution but since the tabs are using flexbox (at least in the few themes I tested), you can use your user stylesheet to get around this by reseting the min-width on the tabs to 0. With no minimum width, they'll just continue to scale down to fit the space. With enough tabs you won't be able to read them but you can hover to get the tooltip.

Probably 80 ways to do this but here's one.

// infinite atom tabs
.tab-bar {
    > .tab {
        min-width: 0;
    }
}

To eek a little bit more readable text out of each tab, you can reduce the margin on the titles themselves as well as left aligning the text.

// infinite atom tabs
.tab-bar {
    > .tab {
        min-width: 0;
        .title {
            // 7% looks good when the tab count is low 
            // and basically squishes to nothing when the tab count is high.
            margin: 0 7%;
            text-align: left;
        }
    }
}

Atom is kind enough to live reload your stylesheet as soon as its saved. You could leave something like this in there commented out and turn it on when it's ¡Tabs Gone Wild! time again.

[willthemoor]

Alternate version where the tab bar grows in height. Because, flexbox.

// infinite atom tabs, wrapped
.tab-bar {
    -webkit-flex-wrap: wrap;
    height: auto;
    .tab, .tab.active {
        -webkit-flex: initial;
        .title {
            // a little room for the Close icon
            padding-right: 9px;

            // removing the mask is optional but not really needed in this mode. 
            -webkit-mask: none;

            // for fixed width tabs, uncomment:
            // max-width: 11ch;

        }
    }
}

Tested with One Dark/Light, Atom Dark/Light and Seti themes only. I imagine it'll work with most themes but will probably require a little tweaking.

Dragging and dropping tabs in this mode is understandably a little wonky with drop targets but still works.

[v3ss0n]

Very good , but i am sure with very little coffeescript , can do a tab strip like we wanted too . If i am free i could contribute but i won't be free for a few months. i will see.

[gavsiu]

@willthemoor Modified your style a little.

Shrink the close icon so it doesn't take up so much space.

// infinite atom tabs
.tab-bar {
    > .tab {
        min-width: 0;
        .title {
            // 7% looks good when the tab count is low 
            // and basically squishes to nothing when the tab count is high.
            margin: 0 7%;
            text-align: left;
        }
        .close-icon {
            padding: 0 7%;
        }
    }
}

Not to toot my own horn, but I think this will also work well with atom/atom#11448 (comment) to hide close icon when tab is inactive. Less chance of closing tabs when they are tiny, although it does have an issue with hiding the modified icon on hover.

I would still prefer a better solution to the hidden tabs like the Firefox approach. Yes, I can scroll the tab bar with the mousewheel, but I can't tell which is selected when the tab is off the window. What if I have 2 files from different locations that are almost identical and I'm trying to copy stuff back and forth? I can't hover over the tab to see the file location.

[v3ss0n]

This issue is only thing that making atom hard to use. Can we get an official solution please? @izuzak , i think it is a good time now since tabs aren't improved for long.

[kamil-kielczewski]

@v3ss0n Put mouse on tabs bar and use: SHIFT + mouse scroll wheel

[v3ss0n]

I know , if you read above i already doing that since izuzak told. But There is no VISUAL indicator of tabs are hidden , which is a big UX Smell.

[willthemoor]

@gavsiu nice tweak! I get that folks would like an 'official' solution that mimics other tab based apps with a 'see more' UI of some sort but I've grown to really like the wrapping tabs method above. Never a question about what's open and when it gets silly like the condensed screen shot examples included above it serves as a good reminder to close some old stuff out. :) CMD+P/T is super duper fast (thank you Atom devs!).

[50Wliu]

/cc @simurai

[simurai]

@willthemoor CMD+P/T is super duper fast

Good point! 👍

And cmd-b (mac) shows a list of only the opened tabs.

If you'd like to have a visual reminder or something similar to a "dropdown button":

1. Install tool-bar.
2. Install flex-tool-bar or tool-bar-config or fork toolbar-main.
3. Add a new button with the fuzzy-finder:toggle-buffer-finder command.

In the gif above, it's a forked toolbar-main with this added to the top of lib/tool-bar-main.coffee:

@toolBar.addButton
      tooltip:  "All tabs [cmd-b]"
      callback: "fuzzy-finder:toggle-buffer-finder"
      icon:     "more"
      iconset:  'ion'

It doesn't exclude the "tabs that are visible" and the order is not the same, but should get you somewhat closer to a "show hidden tabs" button.

[v3ss0n]

@simurai not a bad idea

• Making it show only when hidden
• Show clicking it shows the buffer finder.

Will get to what we want.

But we still think this should be something at official.

[jerone]

My preference is using the Expose package.

Just like @simurai I added a button to the Tool Bar package calling expose:toggle command.

[v3ss0n]

wow very good idea!!

[v3ss0n]

we just need following:

• A way to detect hidden tabs.
• Toolbar is overkill , just a small button needed on tab bar. Would be nice for a plugin.

[MartinBonner]

What I really want, is a button on either end of the tab bar to scroll it (when that is possible), and for this to work with the vertical-tabs extension.

At the moment, sticking with willthemoor's wonderful multi-line tab-bar.

[v3ss0n]

yea exactly that is what i proposed. almost two years now.

[misterbridge]

So I guess it's not going to be done ... ? :/

[v3ss0n]

this is really necessary. i hope they do it.

[willthemoor]

@v3ss0n https://github.com/atom/tabs/blob/master/CONTRIBUTING.md

[willthemoor]

I switch syntax themes somewhat regularly but basically always use One Light UI or One Dark UI for the UI Theme. Here's what's currently in my .atom/styles.less for a 'slender', wrapping tab bar.

//
//  Infinite Atom tabs, wrapped. 
//  Should work with most UI themes but can be scoped if required.
//
.tab-bar {
  -webkit-flex-wrap: wrap;
  height: auto;
  .tab, .tab.active {
    -webkit-flex: initial;
    .title {
      // Don't need the fade/mask.
      -webkit-mask: none;

      // A little room for the Close icon.
      padding-right: 9px;

      // Uncomment if fixed width is your thing.
      // max-width: 11ch;
    }
  }
}

//
//   Slender tabs for "One" UI themes.
//

// Adjust these vars to adjust breathing room.
@tab-bar-height: 2.3em;
@tab-padding:  0;

.theme-one-dark-ui,
.theme-one-light-ui {
  .tab-bar {
    // height: auto; required for infinite tabs below
    // otherwise, set it to @tab-bar-height
    height: auto;

    // Position the 'changed' indicator up and out of the way.
    .tab.modified:not(:hover) .close-icon {
      background-color: transparent;
      top: -2px;
      right: 0;
    }

    > .tab {
      height: @tab-bar-height;
      line-height: @tab-bar-height;
      min-width: 0;
      padding-left: @tab-padding;
      padding-right: @tab-padding;

      // Position close icon. Made BIG on hover.
      .close-icon {
        height: @tab-bar-height * 0.9;
        line-height: @tab-bar-height;
        right: 1px;
        top: 1px;
      }
    }
  }
}