Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update profiler's layout to use flexbox #19786

Closed
wants to merge 2 commits into from

Conversation

Projects
None yet
4 participants
@javiereguiluz
Copy link
Member

commented Aug 30, 2016

Q A
Branch? 2.8
Bug fix? yes
New feature? no
BC breaks? no
Deprecations? no
Tests pass? yes
Fixed tickets -
License MIT
Doc PR -

Problem

The layout of the profiler uses some old CSS tricks to make the sidebar look like a same-height sidebar (margin-bottom: -99999px; and padding-bottom: 99999px;, a large min-height in the content, etc.)

This works most of the time ... but there are some edge cases where the sidebar looks ugly (it doesn't have the same height as the main content).

Solution

This proposal updates the profiler layout to use CSS flexbox.

  • It looks and behaves exactly like before ... but it also fixes all the edge cases.
  • flexbox has ~90% of global browser support --> so it should be 100% of Symfony developers

Sadly there is one issue that I cannot solve:

* The "Performance" panel doesn't work on Chrome and Firefox (but it works on Safari!!)
* The problem is that the getContainerWidth() function in time.html.twig template doesn't return the right value and the generated canvas has a wrong width.

Any clues? It's fixed now!

@eXtreme

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

@javiereguiluz Well, the flexbox is a tricky one but the thing you have to do is to add min-width: 0; (good old css hacks, but for flexbox) to #collector-wrapper.

@javiereguiluz

This comment has been minimized.

Copy link
Member Author

commented Aug 31, 2016

@eXtreme your proposal solved the problem brilliantly! Thanks.

So this is now ready to be reviewed and merge/reject it.

@fabpot

This comment has been minimized.

Copy link
Member

commented Aug 31, 2016

Thank you @javiereguiluz.

@fabpot fabpot closed this Aug 31, 2016

fabpot added a commit that referenced this pull request Aug 31, 2016

bug #19786 Update profiler's layout to use flexbox (javiereguiluz)
This PR was squashed before being merged into the 2.8 branch (closes #19786).

Discussion
----------

Update profiler's layout to use flexbox

| Q             | A
| ------------- | ---
| Branch?       | 2.8
| Bug fix?      | yes
| New feature?  | no
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | -
| License       | MIT
| Doc PR        | -

### Problem

The layout of the profiler uses some old CSS tricks to make the sidebar look like a same-height sidebar (`margin-bottom: -99999px;` and `padding-bottom: 99999px;`, a large `min-height` in the content, etc.)

This works most of the time ... but there are some edge cases where the sidebar looks ugly (it doesn't have the same height as the main content).

### Solution

This proposal updates the profiler layout to use CSS flexbox.

* It looks and behaves exactly like before ... but it also fixes all the edge cases.
* flexbox has ~90% of global browser support --> so it should be 100% of Symfony developers

---

~~Sadly **there is one issue that I cannot solve**:~~

~~* The "Performance" panel doesn't work on Chrome and Firefox (but it works on Safari!!)~~
~~* The problem is that the `getContainerWidth()` function in `time.html.twig` template doesn't return the right value and the generated canvas has a wrong width.~~

~~Any clues?~~ It's fixed now!

Commits
-------

d986ac0 Update profiler's layout to use flexbox

This was referenced Sep 2, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.