Improve design

[nt1m]

Current design:

Suggested design:

Changes made:

• Changed "Leave tab groups" icon (it was a minus icon which wasn't really clear)
• Increased contrast between the groups and the tabs in single view to clearly separate them
• Added under the selected group to clearly show the relationship between the group and its tabs
• Used lighter background
• Focused tab has blue border
• Improved plus icon
• Removed redundant group title in single view

I would love to submit a PR if this design is accepted

[nt1m]

Also, I would like to make this design cross platform if possible (no more aero/mac/... specific styles). I think this new design would work well for all platforms especially on Windows 10, OSX 10.10+ and Linux.

[nt1m]

What do you think ?

[Quicksaver]

I would like to make this design cross platform if possible (no more aero/mac/... specific styles)

It's already very cross-platform already, with only a few color and borders differences in a few specific cases. For example, I wouldn't do away with the blue tones and rounded corners for vista/7 users, because that integrates much better with other applications and with Firefox itself which still uses those. Other than that integration aspect, I absolutely agree.

I only haven't made it more cross-platform already because I haven't been able to test properly across platforms. So thank you for looking into it as well. ;)

Changed "Leave tab groups" icon (it was a minus icon which wasn't really clear)

I like it.

Increased contrast between the groups and the tabs in single view to clearly separate them

This may only look good for a dark window theme like what you have, its integration with other light-based system themes could be very subjective. Although I do like how it looks. I'd love to see how it looks on a lighter-based theme like on windows or linux, with a lighter titlebar.

Added under the selected group to clearly show the relationship between the group and its tabs

Love it!

Used lighter background

The backgrounds are system defined. It will stand out from other Firefox dialogs like that. [Refer to my integration point above.]

Although for what it's worth, it's not supposed to be so dark like that. It should have the same color as the actions bar on the side. I'll have to investigate. Is that screenshot OSX or Linux? (How does grid layout with multiple groups look? Are they all dark like that for you?)

Focused tab has blue border

I had considered that, but opted out of it, for no special reason to be honest. I thought it was better without it at the time. From your screenshot it's definitely worth revisiting.

Improved plus icon

I might do away with it completely. See #192.

Removed redundant group title in single view

I've wanted to do that from the start, but postponed it because this requires another way to change the group title from the main interface, such as from the selector at the top. Granted, you can still change the name of the group from its options dialog, but that's a huge break in workflow when compared to the other viewing modes.

This is trickier than it sounds, because you can hide the groups thumbnails at the top, which means it can't be a simple point-and-click-to-change action anymore in those, otherwise clicking the selector to switch groups could edit the name instead by accident, and/or vice-versa. :/

[Quicksaver]

For example, I wouldn't do away with the blue tones and rounded corners for vista/7 users

Which on second thought, probably won't fit in very well with those colors in your design. Which means this could indeed be a very good start to remove platform-specific code entirely. (A "start" only because those could still have a good effect in free arrange mode, and maybe also grid layout, despite your design being integrated for single view.)

[nt1m]

Increased contrast between the groups and the tabs in single view to clearly separate them

This may only look good for a dark window theme like what you have, its integration with other light-based system themes could be very subjective. Although I do like how it looks. I'd love to see how it looks on a lighter-based theme like on windows or linux, with a lighter titlebar.

I think it should look good if the borders around the tab view frame are done somewhat like this: cl.ly/image/3Q3m1m122E0y/o
I've just forked the add-on, I'll alert you when I'll have some changes for you to check out, but it likely won't happen this month. I'll do some testing on a Windows PC to make sure everything looks alright.

Used lighter background

The backgrounds are system defined. It will stand out from other Firefox dialogs like that. [Refer to my integration point above.]

Honestly I'm not a fan of values the system provides by default (-moz-dialog, -moz-whatever, ...).
If your concern is for H-C themes, I'd be happy to set the variables to different values for Windows High Contrast themes.

Although for what it's worth, it's not supposed to be so dark like that. It should have the same color as the actions bar on the side. I'll have to investigate. Is that screenshot OSX or Linux? (How does grid layout with multiple groups look? Are they all dark like that for you?)

This is on OSX 10.11. The gray colour is just as dark in other layouts.

Removed redundant group title in single view

I'll exclude this change. I guess adding an edit button could work. That edit button would trigger inline editing.

[Quicksaver]

I'll alert you when I'll have some changes for you to check out, but it likely won't happen this month.

You have plenty of time. I also wouldn't be able to get to it for a few weeks as well, as I'm completely swamped.

I'd be happy to set the variables to different values for Windows High Contrast themes.

Can this be done through CSS alone? I'm not aware of any windows selectors that could help here (although I don't know them all of course, and I haven't checked right now to confirm).

This is on OSX 10.11. The gray colour is just as dark in other layouts.

Definitely not intended then. I'll have to check that out.

[propertunist]

wasn't the first release of this plugin a direct port of the original firefox in-built tab group feature? (or was that a different plugin?). i really don't see what was wrong with the original firefox version.

[Quicksaver]

@propertunist there were a lot of things wrong, even if they happened to not bother you specifically. Also, the new version didn't come only to fix "bad" things, it came to introduce new and possibly better things, virtually all of which were suggestions by users just like you. This issue is not the best place to ask that though, so if you'd like more information, please open a new one or send me an e-mail so we can discuss things properly without spamming this thread.

[propertunist]

i read this thread to discuss improved design ideas. i just discovered that the reason i was having such difficulty with this version of the code is that the toolbar option was enabled that produces a dropdown menu instead of a button - which left the impression that the entire drag and drop functionality was basically gone.

[dgutov]

Increased contrast between the groups and the tabs in single view to clearly separate them

FWIW, I prefer light themes in general, and I don't really like this part of the proposal. The rest looks good.

Could we also have the size of selection (and hover) highlight padding around the thumbnails to be adaptive? It gets a little too big when the thumbnails get smaller.

[Quicksaver]

Could we also have the size of selection (and hover) highlight padding around the thumbnails to be adaptive? It gets a little too big when the thumbnails get smaller.

While not impossible (and possibly a nice effect, agreed) this is actually much more complex than it sounds. I wouldn't touch that here at least, and would leave that for its own patch, possibly related to #251 or #256.

[nt1m]

Increased contrast between the groups and the tabs in single view to clearly separate them

FWIW, I prefer light themes in general, and I don't really like this part of the proposal. The rest looks good.

I wouldn't call this a dark theme since 70% of the UI is still light with my redesign.
I do think using 2 radically different colours helps separating groups from tabs. I've heard some people have been confused by the single view (I'm guessing @propertunist is one of them?). I think this makes things less confusing, especially in addition to the arrow. I'm open to suggestions though.

I'd be happy to set the variables to different values for Windows High Contrast themes.

Can this be done through CSS alone? I'm not aware of any windows selectors that could help here (although I don't know them all of course, and I haven't checked right now to confirm).

Yes, targetting non-default windows themes should work. In addition to high-contrast themes, this will also target the classic theme and 3rd party themes, but that's not a big issue.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#-moz-windows-default-theme

[dgutov]

I wouldn't call this a dark theme since 70% of the UI is still light with my redesign.

Yes, I only meant the light-on-dark part. Mixing dark-on-light and light-on-dark in one theme is not great.

I think this makes things less confusing, especially in addition to the arrow. I'm open to suggestions though.

Maybe the arrow could be attached to a thin darker bar. Similar to the one we have now, but maybe a bit thicker.

[Quicksaver]

I wouldn't call this a dark theme since 70% of the UI is still light with my redesign.

Yes, I only meant the light-on-dark part. Mixing dark-on-light and light-on-dark in one theme is not great.

I agree with that in concept. But I have to admit that in this particular case I wouldn't oppose it, as I think it works well overall because of that slight light blue (purple?) tint. The other elements (group thumbnails, titles, buttons) are still very light, so it's hard to characterize this as a "dark-element" completely.

I think it deserves to at least be checked out across many systems and themes, including ones with lighter titlebars like I mentioned, to see if it doesn't contrast too much there.

I wouldn't oppose hearing other suggestions either of course. ;)

Maybe the arrow could be attached to a thin darker bar. Similar to the one we have now, but maybe a bit thicker.

Do you mean separate the two areas more clearly through a thicker border? I wouldn't agree, that adds a degree of complexity to the interface's look that would go unjustified; plus could possibly lead to confusion for looking like its own element, such as "there's a divider here, why can't I drag it to make it larger or smaller?"

[dgutov]

The other elements (group thumbnails, titles, buttons) are still very light, so it's hard to characterize this as a "dark-element" completely.

That's what "light on dark" is. Meaningful elements painted with light color, on a dark background.

Do you mean separate the two areas more clearly through a thicker border? I wouldn't agree

Well, I'm fine with the current separator anyway. Maybe it could have an arrow, maybe not.

The arrow could just be a new zag in the narrow line of the current separator. Like in speech bubbles (the "bubble" would be the whole lower part).

[Quicksaver]

@nt1m hey Tim! What's your availability for this? If you prefer, you can just create a PR with whatever you already have and I'll iron out any edges still left to do. You've already done so much with this idea. :)

[nt1m]

@Quicksaver Unfortunately, the design was just something I've quickly hacked up by editing the CSS with the devtools (I haven't kept the CSS unfortunately).
I can't guarantee I'll get to it soon, but if you'd like to take a go, here are the graphics I've used:

• "+" icon: https://hg.mozilla.org/mozilla-central/raw-file/66a77b9bfe5dcacd50eccf85de7c0e7e15ce0ffd/browser/themes/windows/tabbrowser/newtab.svg
• Exit tab groups (just save it as an SVG file):

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M19,22H6a2,2,0,0,1-2-2V18l2,2H18a1,1,0,0,0,1-1V5a1,1,0,0,0-1-1H6L4,6V4A2,2,0,0,1,6,2H19a2,2,0,0,1,2,2V20A2,2,0,0,1,19,22Zm-6-9H5.4l4.2,4.154L8.186,18.631,1.567,12.017,8.021,5.411,9.5,6.95,5.424,11H13v2Z"/>
</svg>

Let me know if you have any questions :)

[Quicksaver]

@nt1m quick question, how did you do the arrow showing the active group? I know Firefox has something like that but I can't seem to find it at the moment, can't even recall where I've seen it before...

[omega]

it could be a :before and border-width hack, ala https://css-tricks.com/snippets/css/css-triangle/

[nt1m]

@Quicksaver Yeah, I did what @omega described.

[Quicksaver]

Beta version 2.1b2! Who's willing to try it out? :)

[nt1m]

@Quicksaver Looks really cool! Thanks for taking this on :)

[Quicksaver]

@nt1m on the contrary, thank you for the suggestion and your initial mockups in the first place. :)

[r2rien]

Very nice improvment, thanks!
On a side note, this purple goodness makes a little bit harder to distinguish tabs inside, when its tabs hasn't been opened yet (session restore) however quite minor as selecting it shows well all tabs below
In attached screenshot the one just right at the current has 3 tabs, and its next on the right has 35 tabs:

[Quicksaver]

@r2rien made some small improvements to the group thumbs in beta version 2.1b4, please try it out and let me know what you think.

The tabs should appear with a slight border around them, it should be distinctive enough to at least be distinctive from the background, but still subtle enough not to overpower the tab thumbnails.

[omega]

The button on the main toolbar could use a bit more padding, but otherwise it looks a lot better!

https://dl.dropboxusercontent.com/s/bcbjrckxf4j96nh/Screen%20Shot%202016-10-18%20at%2008.33.35.png?dl=0

[Quicksaver]

The button on the main toolbar could use a bit more padding

What version of Yosemite are you on? It has sufficient padding for me on Yosemite at least.

[Quicksaver]

@omega also please open a new issue about that, it really has nothing to do with the discussion in here.

[omega]

Sorry, I confused this issue with another one. Made a new one now

[r2rien]

@Quicksaver great!, thanks - looks perfect for me

[Quicksaver]

@Aralun that has nothing to do with this issue actually, it's much more likely related to #232. Please use the new issue I created, and reply there with the info I asked for.