bwinton / TabCenter

Firefox add-on for arranging tabs vertically
https://testpilot.firefox.com/experiments/tab-center
210 stars 56 forks source link

Pinned tabs could always be compact (in large tabs mode) #922

Open fvsch opened 7 years ago

fvsch commented 7 years ago

Suggestion: what about making pinned tabs compact (36px tall instead of 56px) in large tabs mode?

As many users — if I remember conclusion from Mozilla UX studies correctly — I tend to use pinned tabs to save tabs for later, with lower friction than bookmarks. That can mean 3–10 open tabs, plus 3–10 pinned tabs.

We know that because of the tab list being a single list of siblings and because of the XUL / -moz-box styles, it’s hard making a list of icons for pinned tabs. But maybe constraining them to the "compact" mode (36px tall, no preview) would help reclaim some space?

bwinton commented 7 years ago

I think I'ld be up for that. At the very least, I'ld like to see how it looks. And it shouldn't be that hard to change the CSS, if you wanted to give it a stab… 🙂

ericawright commented 7 years ago

@bwinton, you mocked this up before, remember - do you have a screenshot of that?

bwinton commented 7 years ago

I don't think I do… 😢

ericawright commented 7 years ago
screen shot 2017-02-13 at 1 46 14 pm

Done by adding .tabbrowser-tab:not([pinned]) to all of the .large-tabs css rules

fvsch commented 7 years ago

What did you think of the result when hacking it up, @ericawright? Should I try making a PR for this?

ericawright commented 7 years ago

@fvsch hard to say. Usability, I like it. Visually I don't. It would have a bonus of inadvertently fixing #931

bwinton commented 7 years ago

Yeah, I think I'ld like the favicons to line up with the favicons in the thumbnails… And maybe put the small white box around them, too…

0b10011 commented 7 years ago

I use pinned tabs as applications that I regularly access and need notifications for (eg, Inbox, GitHub, etc). So I don't need (or want) to see the page title, url, etc. It would be a nice option to have pinned tabs only display the icon, side-by-side. Currently, my pinned tabs take up a pretty considerable amount of room, even in the title-only view.

Side-by-side could look something like this:

tabcenter-pinned

Personally, I'd rather the icons were even smaller than that (I just went with the same height as the existing two-line tabs).

But, this is just a personal preference, so maybe a separate theme option for pinned tabs? Large, compact, and icon only?

bwinton commented 7 years ago

@0b10011: What would happen when the sidebar shrank down to its condensed height?

0b10011 commented 7 years ago

@0b10011: What would happen when the sidebar shrank down to its condensed height?

When the collapsing feature is turned off, it would appear as-is all the time.

When it is turned on, the pin could be the only thing to appear. With that in mind, it'd probably be a good idea to move the pin to the left side and simply hide everything to the right:

tabcenter-pinned-open tabcenter-pinned-closed

If there were multiple lines of pinned tabs, the pin could either be repeated for each one, or centered vertically. Or maybe another icon-less solution (bg-color for example).

0b10011 commented 7 years ago

If there were multiple lines of pinned tabs, the pin could either be repeated for each one, or centered vertically. Or maybe another icon-less solution (bg-color for example).

Alternatively, only the first line could be displayed by default, with a second fly-out (downward) when you hover over the pinned section. Might get a little crazy at this point, but maybe not.

bwinton commented 7 years ago

So you wouldn't know which tabs you had pinned? Or if one of them was active, which one? That doesn't sound like great solution for arguably the most important tabs in your browser…

0b10011 commented 7 years ago

So you wouldn't know which tabs you had pinned

They could be listed on their own lines as well. Which defeats the purpose of saving space, but they could be listed with smaller icons at least, to save space. This becomes more important on widescreen monitors as pinned tabs were to save space but they end up taking up just as much room as other tabs pixel-for-pixel, but there's less space available. Compacting them on their own lines helps a little. Smaller icons more. Could opt to only wrap them when collapsing is turned off?

Or if one of them was active, which one?

Could overlay the icon over the pin. But still not able to see all that are available.

That doesn't sound like great solution for arguably the most important tabs in your browser…

For me, I know what my pinned tabs are. They remain constant day-to-day. It's helpful to know when one of them has items waiting my attention (a chat, new email, etc), but OS notifications (and a notification count on the pin when I step away and miss the OS notification) would be enough to do that. The biggest drawback for me would be not being able to see which tab I was on when Ctrl+Tabbing. I guess that could be worked around by auto-expanding when Ctrl-Tabbing, but there'd still be a bit of a delay. But this isn't something I do in pinned tabs very often, so it's pretty close to a non-issue for me.


It gets pretty tricky with collapsing, especially trying to take into account everyone's use cases. The safest routes would be:

  1. Only stack icons next to eachother horizontally when auto-collapse is turned off. Otherwise on top of eachother.
  2. Have a user preference to specify what to do when collapsing. You would need a different set of preferences for "Auto-Collapse" and "Expanded" views.