561099 - Long filenames make the download dialog span out past the viewable area

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Aakash Desai [:aakashd]]

Build id:
Mozilla/5.0 (X11; U; Linux armv7l; Nokia N900; en-US; rv:1.9.2.5pre) Gecko/20100421 Namoroka/3.6.5pre Fennec/1.1a2pre

Steps to Reproduce:
1. Go to http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mobile-1.9.2/
2. Start a download of the latest deb build 
3. View the download dialogs as they pop-up

Actual Results:
The download dialog spans out past the viewable area

Screenshot: http://www.flickr.com/photos/42893104@N04/4542992815/

Expected Results:
The dialog should be fully visible within the viewable area and be slightly margin'ed away from the right side of the viewable area.

Comment 2

[Mark Finkle (:mfinkle) (use needinfo?)]

Madhava wants to turn this dialog into a notification bar anyway.

Comment 3

[Wesley Johnston (:wesj)]

Attachment: Position using bottom, right, and css transforms

This changes how the alert box is positioned to use bottom/right in the stack, and then uses CSS transforms and margins to position the box when its shown. That seems to fix the bug and happily allows removing those magic "-20" from the javascript. It also means we can use css-transitions to animate this slide in, which I did here.

There's some weirdness. I have to set the box height directly or else the boxes will slip off the bottom of the page. I'm not sure what that is. If there's an easy fix, I'd be happy to hear about it.

Comment 4

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 468536 [details] [diff] [review]
Position using bottom, right, and css transforms

>diff --git a/chrome/content/browser.js b/chrome/content/browser.js

>+  get container() {
>+    if(!this._container) {

Space between if and (
>diff --git a/chrome/content/browser.xul b/chrome/content/browser.xul

>-    <hbox id="alerts-container" hidden="true" align="start" class="dialog-dark" top="0" left="0"
>+    <hbox id="alerts-container" hidden="true" align="start" class="dialog-dark" bottom="0px" right="0px"

"px" not needed with these attributes

>diff --git a/themes/core/browser.css b/themes/core/browser.css

>+#alerts-container {
>+  -moz-transform: translateX(100%);
>+  -moz-transition-property: -moz-transform;
>+  -moz-transition-duration: 0.5s;
>+  margin-bottom: 20px;
>+}
>+
>+#alerts-container.showing {
>+  -moz-transform: translateX(-20px);

This was causing a shadow drawing problem. There was no bottom/right edge shadow in the alert. I added a -moz-margin-end: 20px (for RTL) to the #alerts-container rule and changed this to translatex(0) - the drawing problem went away.

We'll have to see how the CSS transition works on various devices.

r+ and I'll make the nit fixes before landing.

Comment 5

[Mark Finkle (:mfinkle) (use needinfo?)]

pushed:
http://hg.mozilla.org/mobile-browser/rev/f662427a3796

Comment 6

[Aakash Desai [:aakashd]]

verified FIXED on build:

Mozilla/5.0 (Maemo; Linux armv71; rv:2.0b8pre) Gecko/20101011 Namoroka/4.0b8pre Fennec/4.0b2pre


litmus testcase https://litmus.mozilla.org/show_test.cgi?id=13629 created to regression test this bug.