Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

Fix tab height flusing with the header bug#2835

Merged
jasonLaster merged 3 commits into
firefox-devtools:masterfrom
diessica:tab-height-fix
May 9, 2017
Merged

Fix tab height flusing with the header bug#2835
jasonLaster merged 3 commits into
firefox-devtools:masterfrom
diessica:tab-height-fix

Conversation

@diessica
Copy link
Copy Markdown

@diessica diessica commented May 7, 2017

Associated Issue: #2790

I've removed the fixed height and also decreased tab's padding in order to improve UI alignments. (see Firefox note). I think using a negative margin does the job very well for the expected visual here, hope that's not a problem. :)

Screenshots

Styles are consistent among browsers.

Firefox

Note: Please notice the tab height difference between the current debugger's tab (bottom) and my version (top).

Firefox

Chrome:

screen shot 2017-05-06 at 22 15 18

@codecov
Copy link
Copy Markdown

codecov Bot commented May 7, 2017

Codecov Report

Merging #2835 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #2835   +/-   ##
=======================================
  Coverage   58.25%   58.25%           
=======================================
  Files          61       61           
  Lines        2338     2338           
  Branches      481      481           
=======================================
  Hits         1362     1362           
  Misses        976      976

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d359105...92ba6d1. Read the comment docs.

@diessica diessica changed the title Fix tab height flusing with the header bug (#2790) Fix tab height flusing with the header bug May 7, 2017
@jasonLaster
Copy link
Copy Markdown
Contributor

Thanks @diessica! Looks great, will review shortly :)

@jasonLaster
Copy link
Copy Markdown
Contributor

jasonLaster commented May 7, 2017

I think there are two additional edge cases:

  • many tabs where we will collapse some and show the other tab dropdown button
  • tabs with icons (pretty print, black box)

run yarn storybook to page through them. Just added you to our percy account so you can see all the changes

Here's a screenshot of the many tabs case, where we're no longer hiding tabs...
screen shot 2017-05-07 at 1 28 24 pm

@diessica
Copy link
Copy Markdown
Author

diessica commented May 7, 2017

Thanks for reviewing! I'll look into it soon.

@jasonLaster
Copy link
Copy Markdown
Contributor

Hey @diessica do you think we can clean this up here too: #2791? I don't want to expand the scope too much, but it might be related enough

@diessica
Copy link
Copy Markdown
Author

diessica commented May 8, 2017

Yeah, can do it! :)

@diessica
Copy link
Copy Markdown
Author

diessica commented May 9, 2017

All cases covered now! Sorry, I wasn't familiar with percy. Really cool tool tho!

Since we're at it, I've noticed some issues with the dropdown alignment, especially while in RTL mode. Will fix them in #2791, but let's just get this one merged first.

Copy link
Copy Markdown
Contributor

@jasonLaster jasonLaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@jasonLaster jasonLaster merged commit 2d012cd into firefox-devtools:master May 9, 2017
@jasonLaster
Copy link
Copy Markdown
Contributor

Thanks so much for the help. I feel really good about the tabs, which are kind of our most noticeable UI actually :)

@diessica diessica deleted the tab-height-fix branch May 10, 2017 04:57
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants