855913 - Firefox should indicate the region of <input type=file>

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Alice0775 White]

Attachment: screenshot (empty area)

Build Identifier:
http://hg.mozilla.org/mozilla-central/rev/962f5293f87f
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20130328 Firefox/22.0 ID:20130328031013

Steps to Reproduce:
1. Click empty area

Actual Results:
Unexpected filepicker pops up

Expected Results:
Nothing happens

The filepicker should perform pop up only when I click the text of label or button.
Or Firefox should display the range of the label element in response to a click definitely.

Comment 1

[Alice0775 White]

Attachment: sample html

Comment 2

[philippe (part-time)]

Seeing your screenshot, that is not an empty area, it _is_ part of the file picker widget.
Safari, Chrome do the same (at least on OS X).

Comment 3

[philippe (part-time)]

Attachment: visualising the size of the file picker widget

Same as previous attachment, with a bit of colour.

Comment 4

[Alice0775 White]

(In reply to philippe (part-time) from comment #2)
> Seeing your screenshot, that is not an empty area, it _is_ part of the file
> picker widget.

Firefox should indicate the region of the widget by default.

Comment 5

[Alice0775 White]

> Seeing your screenshot, that is not an empty area
With my eyes, there are empty area.

> Safari, Chrome do the same (at least on OS X).
It is a bad sample.

Comment 6

[Alice0775 White]

And it is problem when I drop a file from explorer to the file picker widget.
a) drop a file onto Browse...button
b) drop a file onto label text
c) drop a file onto empty area(but part of the file picker widget).

a) and b), user can recognize the file picker widget
but c), Region of the file picker widget is inarticulate. sometimes, open a file instead of input a file path

Comment 7

[Mounir Lamouri (:mounir)]

I don't know what we could do without making the UI terribly ugly. Do you have any idea?
(FWIW, Safari and Chrome both have a similar UI as the one we now have and none of them show the area explicitely.)

UX/UI input would be very helpful here.

Comment 8

[rsx11m]

I agree with Alice here, it currently looks like a button and an unrelated label, not really an input element. What's wrong with adding back a bit of border as the old picker had, or a slightly different highlight color (other than the bright yellow shown for illustration in attachment 731001 [details]) possibly including the button as well to emphasize that it's actually an input field?