895457 - Defect - "Remember password" buttons are not visible when in snapped view

Status: VERIFIED FIXED

(Firefox for Metro Graveyard :: Theme, defect, P2)

Description

[Tim Abraldes [:TimAbraldes] [:tabraldes]]

STR:
  1. Put Firefox metro in snapped view
  2. Go to a site requiring a login and log in
  3. Notice that the buttons ("remember," "not now") are partially visible or completely obscured

Comment 1

[Asa Dotzler [:asa]]

While getting everything perfect in snapped view is probably a P2 and not a P1, we should make sure our content-interaction-triggered toolbars, like the passwordd toolbar, function in Snap or otherwise narrow views.

Comment 2

[Sam Foster [:sfoster] (he/him)]

Attachment: snapped-notifications

Adds a @media query for snapped view (although we might tweak the threshold as we test in 8.1) to override the single-row hbox layout to drop each of the action buttons unto their own line.

Comment 3

[Sam Foster [:sfoster] (he/him)]

Attachment: snapped-notification.png

Screenshot of the snapped-view notification in action. 
To confirm: 
(with a fresh profile)
Open twitter.com (or other site that uses a username/password which the browser will prompt to remember)
Enter login details
You'll see the notification bar asking to remember the password
Drag to snapped-view
The layout should change to vertically stack the "Remember password" and "Not for this site" buttons, which should all be visible, not-clipped and operable.

Comment 4

[Sam Foster [:sfoster] (he/him)]

Let me know if you think subverting the flex behavior in CSS like this is reasonable, or if we should change the binding's markup to better fit how we need it to work (we would need to define our own notification binding)

Comment 5

[Matt Brubeck (:mbrubeck)]

Comment on attachment 789763 [details] [diff] [review]
snapped-notifications

Review of attachment 789763 [details] [diff] [review]:
-----------------------------------------------------------------

Rearranging things in CSS without changing markup makes me happy.  Lots of fond memories of the CSS Zen Garden.  :)

::: browser/metro/theme/platform.css
@@ +498,5 @@
>    -moz-box-flex: 9999;
>  }
>  
> +/* ensure the notification children pick up snapped-view box property overrides */
> +.notification-inner .box-inherit {

Is this specifically for the buttons?  If so, please use ".notification-button > .box-inherit" to make this more self-documenting and possibly faster.

Comment 6

[Sam Foster [:sfoster] (he/him)]

.notification-button.box-inherit worked out and I think meets the review-comment goal. 

Landed on fx-team: https://hg.mozilla.org/integration/fx-team/rev/347a01e705df

Comment 7

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/347a01e705df

Comment 8

[Manuela Muntean [Away]]

Attachment: screenshot.png

Mozilla/5.0 (Windows NT 6.2; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Build ID: 20130827030201


While testing this using latest Nightly for iteration #13, I got the result shown in the screenshot. It seems to me that this issue is still reproducible.

Does anyone have any suggestions/thoughts?

Comment 9

[Sam Foster [:sfoster] (he/him)]

I dont follow - the 2 buttons ("Remember password", "Not for this site") are clearly visible in that screenshot?

Comment 10

[Manuela Muntean [Away]]

> I dont follow - the 2 buttons ("Remember password", "Not for this site") are
> clearly visible in that screenshot?

To me, the 2 buttons ("Remember password", "Not for this site") from my screenshot seem to look pretty much the same as the ones from the screenshot attached in comment 3. I'm sorry for the confusion.

Marking this as verified, per comment 8 and comment 9. Thanks Sam!

Comment 11

[Kamil Jozwiak [:kjozwiak]]

Went through the following "Defect" for iteration #14 without any issues. Used the following build:
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013-09-15-03-02-08-mozilla-central/

- Went through the original test case(s) added in comment #0 without any issues
- Logged into Twitter and received the "Remember password" & "Not for this site" prompt. Moved the screen into snapped view and it appeared correctly (nothing being cut off)
- Ensured that moving the screen between full, filled and snapped views worked without any issues (nothing being cut off)
- Ensured that pressing the "X" would dismiss the prompt but display the "Remember" password confirmation the next time around
- Ensured that "Remember password" worked in snapped view without any issues (another story in an earlier iteration also tests this)
- Ensured that "Not for this site" worked in snapped view without any issues (another story in an earlier iteration also tests this)
- Went through all of the test cases using both the left and right side of the screen in snapped view