fix #7546 - styling for flat interface

[jamesmudgett]

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).

Fixes #7546

Test Plan:

[bsclifton]

@jamesmudgett can you attach a screenshot? 😄

[jamesmudgett]

[jamesmudgett]

[bsclifton]

@bradleyrichter should this be configurable? Or should these changes replace what we have?

I really like it- great job @jamesmudgett 😄 I'd vote to have this replace what we have currently

[bradleyrichter]

@bsclifton It's almost ready. Just needs an adjustment for the BM bar and maybe some color adjustment. @jamesmudgett knocked it out while we were sitting in the all-hands. : )

[bradleyrichter]

and yes, it can replace what we have.

[luixxiul]

If you show the bookmark toolbar, the unnecessary border is displayed under the bookmark bar:

[luixxiul]

Please see the cropped image above.

[bradleyrichter]

Yes. I tried removing both top and bottom border on the bm bar and it looks better.

…

On Mar 11, 2017, at 5:42 AM, Suguru Hirahara ***@***.***> wrote: @luixxiul requested changes on this pull request. Please see the cropped image above. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[jamesmudgett]

I think removing the borders is a nice solution, cleaner and simpler.

[jamesmudgett]

[bradleyrichter]

I also lightened the URL box border about 30% and tried a light grey to white gradient from top to bottom. (Clear bg on bm bar) This lightens up the chrome but adds contrast to the tab bar and still allows the white URL BG to show. See what you think...

…

On Mar 11, 2017, at 12:41 PM, James Matthew Mudgett ***@***.***> wrote: — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[jamesmudgett]

@bradleyrichter can you post screenshot, or push to branch?

[bsclifton]

This is looking good! Here's a screenshot on macOS:

Notice now that after the borders have been removed, there is a color difference (dark block under bookmarks toolbar). That needs to have its color adjusted

[bsclifton]

Windows looks good too! 👍 Love these changes!! 😄

Here's another thing I caught: there is no border under tabs which are not active. This may be intended, but it can look a little weird. In the following screenshot, notice the missing border under the Twitter tab

[bsclifton]

Feedback left- really good job 😄 Will keep an eye on this PR and re-review after changes

[jamesmudgett]

Slight adjustment from original design tabs area intentionally slightly darker than bookmarks and address bar area to create a bit of contrast. See original design above instead of two tone for tabs area carried over darker gray into inactive tabs as well to boost contrast to active tab and simplify space. Good call on inactive tab bottom border.

[jamesmudgett]

[cezaraugusto]

I did a rebase and after convo with @bradleyrichter on Slack this looks ready with only a minor touch-up but I think that can be done as a follow-up.

I have some work to do on top of it so I'll merge.

btw @jamesmudgett this looks awesome +++++++++

[cndouglas]

Just noticed the new look on master. Great stuff!

[jonathansampson]

Is that a stray , at the end of the gradient?