Closed Bug 561099 Opened 10 years ago Closed 9 years ago

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

Categories

(Firefox for Android Graveyard :: General, defect)

Fennec 1.1
defect
Not set

Tracking

(fennec2.0b1+)

VERIFIED FIXED
Tracking Status
fennec 2.0b1+ ---

People

(Reporter: aakashd, Assigned: wesj)

References

Details

Attachments

(1 file)

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.
Duplicate of this bug: 572816
tracking-fennec: ? → 2.0b1+
Madhava wants to turn this dialog into a notification bar anyway.
Assignee: nobody → webapps
Assignee: webapps → wjohnston
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.
Attachment #468536 - Flags: review?(mark.finkle)
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.
Attachment #468536 - Flags: review?(mark.finkle) → review+
pushed:
http://hg.mozilla.org/mobile-browser/rev/f662427a3796
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
Flags: in-litmus?
Flags: in-litmus? → in-litmus?(mozaakash)
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.
Status: RESOLVED → VERIFIED
Flags: in-litmus?(mozaakash) → in-litmus+
You need to log in before you can comment on or make changes to this bug.