The built in Element inspector does not detect a file input element correctly




Developer Tools: Inspector
4 years ago
4 years ago


(Reporter: nativist.bill.cutting, Unassigned)


17 Branch

Firefox Tracking Flags

(Not tracked)



(3 attachments)



4 years ago
Created attachment 815875 [details]

User Agent: Mozilla/5.0 (X11; Linux i686; rv:17.0) Gecko/20100101 Firefox/17.0 (Beta/Release)
Build ID: 20130215125822

Steps to reproduce:

The element with id file_input is not detected by the element inspector.

I have reproduced the issue in a fiddle here and provided a screenshot of the issue as an attachment.

Actual results:

Only part of the element was detected.

A full description is available here on Stackoverflow.

Expected results:

The entire element should be detected.

Because it did not detect the entire element, I had a difficult time troubleshooting what was going on.
Component: Untriaged → Developer Tools: Inspector
Created attachment 816954 [details]

Hi Bill,

Thanks for volunteering to fix this bug.  However, I'm unable to reproduce the problem.  It looks like you're using Firefox 17, and I've attached a screenshot of what your example looks like for me on 17.  As you can see, the inspector has selected the entire upload input.

17 is a year old, though, so I also tried reproducing on Nightly, which is version 27, and the problem doesn't happen there, either, and the input element looks nicer.

So I'm not sure why you're seeing different results.  In any case, please try to test with the current version of Firefox, because it looks like the way that Firefox lays out your example has changed in recent versions.

Comment 2

4 years ago
The attachment you provided confirms what I'm seeing as well.  The dotted line should continue to the right and encompass both the remaining file input area and the file input button as they are all part of the same element.  I know it looks like it is encompassing the file input, but this is an artificially created file input I created.  The actual file input is not fully detected.  This is very coincidental and bizarre even.  But if you scroll over the file input button with the mouse, you will see the dotted line appear around the artificially created input "file_fake".  It should appear around the element "file_input".  This fiddle makes it a bit easier to see -
I see.  I don't know what the problem is, but there's a lot of CSS and markup there.  Regardless, on Nightly, the inspector does select the entire input including the Browse button, so if there is a bug here, it looks like it's been fixed.  You can try on Nightly and see.

Comment 4

4 years ago
I don't know what you mean by "Try the Nightly".  I am sleepy though.  I noticed on your previous comment, you posted an attachment.  Can you post an attachment of the inspector selecting the entire input.  A picture is worth a thousand words!  Thanks!  Can you confirm the bug for the said version?
Created attachment 818093 [details]
Nightly screenshot

Firefox Nightly, which is built from the latest source code:

We don't keep bugs open if they've been fixed in the latest code unless there's some unusual reason to do so, and since it appears that Nightly behaves as you expect by selecting the entire file input including the Browse button, I'm going to resolve this bug.
Last Resolved: 4 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.