Closed Bug 561099 Opened 11 years ago Closed 10 years ago

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


(Firefox for Android Graveyard :: General, defect)

Fennec 1.1
Not set



Tracking Status
fennec 2.0b1+ ---


(Reporter: aakashd, Assigned: wesj)




(1 file)

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

Steps to Reproduce:
1. Go to
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


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+
Closed: 10 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 created to regression test this bug.
Flags: in-litmus?(mozaakash) → in-litmus+
You need to log in before you can comment on or make changes to this bug.