1295249 - aboutdebugging: items in category sidebar are no longer centered vertically

Status: VERIFIED FIXED

(DevTools :: about:debugging, defect)

Description

[Julian Descottes [:jdescottes]]

Attachment: flex-single-line-centering.html

STRs:
- go to about:debugging
- check the left sidebar items (categories)

ER: The items should be vertically centered
AR: The text and icon of each item is aligned to the top of its container.

Bug 1000957 modified the behavior of "align-content: center" for flex containers displaying a single line of content (see test case in attachment).

This technique was used to vertically align the items in about:debugging's sidebar. Let's first check if the behavior here is intentional.

Comment 1

[Julian Descottes [:jdescottes]]

Daniel: can you confirm the behavior displayed in the attached test-case here is correct according to the specs?
In Firefox 50, the items in the singleline container were vertically centered
In Firefox 51, they are aligned to the top.

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: about-debugging-sidebar-centering-nightly.png

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: Bug 1295249 - aboutdebugging: fix alignment of sidebar items;

The align-content property no longer has any impact on single line
flex containers [1].

Instead we now use align-items: center to enforce vertical centering.

[1] https://www.w3.org/TR/css-flexbox-1/#change-201409-align-content-wrapping

Review commit: https://reviewboard.mozilla.org/r/71912/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/71912/

Comment 5

[Julian Descottes [:jdescottes]]

Looks like this is clearly explained in the specs now : https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/#propdef-align-content . "align-content" has no effect on single line flex containers.

> The align-content property aligns a flex container’s lines within the flex container when 
> there is extra space in the cross-axis, similar to how justify-content aligns individual 
> items within the main-axis. Note, this property has no effect on a single-line flex container.

Comment 6

[Daniel Holbert [:dholbert]]

Right, yeah.  And in my opinion, your proposed patch is indeed the correct way to fix this bug.

Comment 7

[Jan Keromnes [:janx]]

Comment on attachment 8781498 [details]
Bug 1295249 - aboutdebugging: fix alignment of sidebar items;

https://reviewboard.mozilla.org/r/71912/#review69992

LGTM!

Comment 8

[Julian Descottes [:jdescottes]]

Thanks for the review, checkin-needed.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c8d1ed197537
aboutdebugging: fix alignment of sidebar items;r=janx

Comment 10

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/c8d1ed197537

Comment 11

[Kazi Nuzhat Tasnem]

I have reproduced this bug with Firefox nightly 51.0a1(build id:20160815030201)on
windows 7(64 bit)

I have verified this bug as fixed with Firefox nightly 51.0a1(build id:20160822064441)
User Agent:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0

[bugday-20160824]

Comment 12

[Farhadur Reja Fahim]

I have reproduced this bug with Nightly 51.0a1 (2016-08-15) on Linux Mint 18, 64 bit!

The bug's fix is now verified on latest Nightly 51.0a1.

Nightly 51.0a1:
Build ID 	20160830030201
User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:51.0) Gecko/20100101 Firefox/51.0

[bugday-20160831]