1018340 - Gaia edit mode header is not exclusively visible

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia, defect)

Description

[Eitan Isaacson [:eeejay]]

The edit header is not properly hidden (a conflicing rule between the transition and hidden attribute).

When it is toggled, the regular header is not hidden, and is simply obscured.

Comment 1

[Kevin Grandon :kgrandon]

I think it would be good to restructure the header component to support this. I think it makes sense to have the two headers to be able to work together, without having specific app code, or relying on specific ordering in the app dom.

Eitan and I spoke over IRC, and one workaround that might be ok for now would be something like: 

gaia-header[edit].active + gaia-header { visibility: hidden; }

Comment 2

[Eitan Isaacson [:eeejay]]

(In reply to Kevin Grandon :kgrandon from comment #1)
> I think it would be good to restructure the header component to support
> this. I think it makes sense to have the two headers to be able to work
> together, without having specific app code, or relying on specific ordering
> in the app dom.
> 
> Eitan and I spoke over IRC, and one workaround that might be ok for now
> would be something like: 
> 
> gaia-header[edit].active + gaia-header { visibility: hidden; }

I think that may be problematic. First, you would need to assure that the z-index of the preceding edit header is higher than the non-edit header. If you switched the order, you can't style the non-edit header automatically. So this doesn't seem to really simplify things extremely or make them less error prone.

I think embedding the edit header in the non-edit header may be worth considering.

Comment 3

[Eitan Isaacson [:eeejay]]

Attachment: Link to Github pull-request: https://github.com/mozilla-b2g/gaia/pull/19836

This patch just fixes the styling, I think we still need to figure out a better approach than the current decoupled one.

Comment 4

[Kevin Grandon :kgrandon]

Comment on attachment 8431825 [details] [review]
Link to Github pull-request: https://github.com/mozilla-b2g/gaia/pull/19836

Seems fine to land for now, but I have some question about <content id="gaia-header-edit">. I don't think that should be there.

Let's also either keep this bug open to track the work for the better approach, either in this bug or in another.

Comment 5

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

I would leave it as it is, the only thing I see wrong here is in:
<gaia-header id="header2" ... hide>
`hide` should be `hidden` that way is initially hidden :) 

Other thoughts:
- We could have [edit] so we get rid of skin="organic" and maybe makes the component easier to read.
- I would not use gaia-header + gaia-header selector, as we don't know if any of them is wrapped in container.

Comment 6

[Eitan Isaacson [:eeejay]]

Comment on attachment 8431825 [details] [review]
Link to Github pull-request: https://github.com/mozilla-b2g/gaia/pull/19836

https://github.com/mozilla-b2g/gaia/commit/5914cb76fb53214605cf8f7d3c3ac12d42029f33

Comment 7

[Stephany Wilkes]

Marking this bug as required for 2.1 since the web components Header is the one committed web component for 2.1. Other web components for 2.2 depend on Header going first. 

Sorry for doing this late; Hema just brought this bug to my attention today, but it reflects agreed scope and is in the agreed 2.1 plan.

Comment 8

[Wilson Page [:wilsonpage]]

This appears to have landed a while back.