User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:35.0) Gecko/20100101 Firefox/35.0 Build ID: 20141111004002 Steps to reproduce: tabs are weird, not really flat with a flat design. Expected results: Can you do something more like this? https://github.com/kenwheeler/brogrammer-theme https://camo.githubusercontent.com/11cf51277416bc0ca6ca3ebf05306b2abb32f55c/687474703a2f2f692e696d6775722e636f6d2f3745506138576d2e706e67

A little suggestion: #tab-view-deck { margin-top: -1px; } .tabbrowser-tab[selected] { box-shadow: #2A7CB1 0px -3px 0px 0px inset; }

Do not use: ``` #tab-view-deck { margin-top: -1px; } ``` it breaks tabs when "customise" is clicked.

See also the pinned tab which is awful.

``` .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { background-image: radial-gradient(farthest-corner at center bottom , #FFF 3%, rgba(186, 221, 251, 0.75) 20%, rgba(127, 179, 255, 0.25) 40%, rgba(127, 179, 255, 0) 70%); } ``` Really better.

(In reply to Erwann Mest from comment #4) > See also the pinned tab which is awful. That's fixed by bug 1096371

(In reply to Erwann Mest from comment #0) > User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:35.0) > Gecko/20100101 Firefox/35.0 > Build ID: 20141111004002 > > Steps to reproduce: > > tabs are weird, not really flat with a flat design. They are designed that way (to be similar to the devtools toolbox tabs).

I did notice though that in the most recent mockup I've seen (http://cl.ly/image/3Q3m1m122E0y/o) that the current colors for the top/bottom borders are off - when implementing I picked the ones from DT toolbox but they are supposed to be a bit different. I'll attach that patch to this bug

It's quite better yes. :)

Updates box shadow colors for tabs

To be honest, box-shadow shouldn't exist as it's a flat design. It should exist only only to make a border-like but not for gradient.

I didn't try a lot to edit the theme (via browser toolbox) but it could be great if there wasn't any space padding/margin. See the attachement. It should steak the black border of firefox.

Comment on attachment 8521427 [details] [diff] [review] tab-selection-colors.patch Clearing review - I think this still needs some work to match the mockup

Updates the box shadow colors for selected tab based on http://cl.ly/image/3Q3m1m122E0y/o.

Comment on attachment 8521835 [details] [diff] [review] tab-selection-colors.patch Review of attachment 8521835 [details] [diff] [review]: ----------------------------------------------------------------- rs=me but ask shorlander or someone design-y for ui-r, please. :-)

Oh, and does this not end up looking too stripe-y on retina mac because retina?

Comment on attachment 8521835 [details] [diff] [review] tab-selection-colors.patch Review of attachment 8521835 [details] [diff] [review]: ----------------------------------------------------------------- Stephen, here are builds you can use to check out the selected tab style for light and dark devedition theme: https://tbpl.mozilla.org/?tree=Try&rev=dd1a7b6a8cf0.

Met with Stephen and we worked through this together. There were some color changes and a change from an inset box shadow to a negative offset. Also, on windows there was a -1px margin on tabstoolbar that was causing an extra px of overlap in which the tabs hung over the nav bar.

You're adjusting the box shadow everywhere, but the margin only on Windows? Does that not break stuff on OS X or Linux? IIRC the navbar overlap is the same everywhere in the default theme, so I'm surprised you need a Windows-specific fix there.

(In reply to :Gijs Kruitbosch from comment #21) > You're adjusting the box shadow everywhere, but the margin only on Windows? > Does that not break stuff on OS X or Linux? IIRC the navbar overlap is the > same everywhere in the default theme, so I'm surprised you need a > Windows-specific fix there. Hm that's weird, I was just going off of what I saw when running with the patch applied. We really need to proceed with Bug 1091001 (awaiting review) so I can just set --tab-toolbar-navbar-overlap: 0 and handle it across all platforms. We should probably block on that instead of doing this windows specific workaround.

Comment on attachment 8533855 [details] [diff] [review] tab-selection-colors.patch OK! Clearing review for now, then. :-)

Using the --tab-toolbar-navbar-overlap variable now and getting rid of platform specific hack

Comment on attachment 8549089 [details] [diff] [review] tab-selection-colors.patch Review of attachment 8549089 [details] [diff] [review]: ----------------------------------------------------------------- r=me on the assumption that you're happy with this new tab look. :-) ::: browser/themes/shared/devedition.inc.css @@ +229,5 @@ > #nav-bar { > margin-top: 0 !important; > border: none !important; > border-radius: 0 !important; > + box-shadow: 0 -1px var(--chrome-nav-bar-separator-color) !important; What's the difference here, out of curiosity? :-)

Here is the difference between the two box shadows. It's kind of subtle but you can see on the bottom of the tab/top of the nav bar on the left is overlapping but on the right they are separated. The new way is on the left.

(In reply to :Gijs Kruitbosch from comment #25) > Comment on attachment 8549089 [details] [diff] [review] > tab-selection-colors.patch > > Review of attachment 8549089 [details] [diff] [review]: > ----------------------------------------------------------------- > > r=me on the assumption that you're happy with this new tab look. :-) > Yeah, Stephen and I worked together on implementing it