Bug 52500 - Allow styling <input type='file'> like any other form control. r=bz, a=lsblakk
authorMounir Lamouri <mounir.lamouri@gmail.com>
Fri, 17 May 2013 18:40:14 +0100
changeset 138526 b31b08960f75f0d517260026236d3211282a975a
parent 138525 d9a77ea591250f197e499f72fdb7c20bda8b38b4
child 138527 59f9f7a8bd8e92d7aabdbc79856d336a4e632a79
push id3778
push userryanvm@gmail.com
push dateWed, 22 May 2013 17:24:51 +0000
treeherdermozilla-aurora@59f9f7a8bd8e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz, lsblakk
bugs52500
milestone23.0a2
Bug 52500 - Allow styling <input type='file'> like any other form control. r=bz, a=lsblakk
layout/forms/nsFileControlFrame.cpp
layout/reftests/forms/input-file-width-clip-1.html
layout/reftests/forms/input-file-width-clip-ref.html
layout/reftests/forms/input/file/input-file-background-ref.xul
layout/reftests/forms/input/file/input-file-background.html
layout/reftests/forms/input/file/input-file-rtl-ref.xul
layout/reftests/forms/input/file/input-file-rtl.html
layout/reftests/forms/input/file/input-file-style-ref.xul
layout/reftests/forms/input/file/input-file-style.html
layout/reftests/forms/input/file/input-file-width-clip-ref.html
layout/reftests/forms/input/file/input-file-width-clip.html
layout/reftests/forms/input/file/reftest.list
layout/reftests/forms/input/file/style.css
layout/reftests/forms/reftest.list
layout/style/forms.css
--- a/layout/forms/nsFileControlFrame.cpp
+++ b/layout/forms/nsFileControlFrame.cpp
@@ -338,52 +338,17 @@ nsFileControlFrame::SetFormProperty(nsIA
   return NS_OK;
 }
 
 void
 nsFileControlFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
                                      const nsRect&           aDirtyRect,
                                      const nsDisplayListSet& aLists)
 {
-  // box-shadow
-  if (StyleBorder()->mBoxShadow) {
-    aLists.BorderBackground()->AppendNewToTop(new (aBuilder)
-      nsDisplayBoxShadowOuter(aBuilder, this));
-  }
-
-  // Clip height only
-  nsRect clipRect(aBuilder->ToReferenceFrame(this), GetSize());
-  clipRect.width = GetVisualOverflowRect().XMost();
-
-  nsDisplayListCollection tempList;
-  {
-    DisplayListClipState::AutoSaveRestore clipState(aBuilder);
-    clipState.ClipContainingBlockDescendants(clipRect, nullptr);
-
-    // Our background is inherited to the text input, and we don't really want to
-    // paint it or out padding and borders (which we never have anyway, per
-    // styles in forms.css) -- doing it just makes us look ugly in some cases and
-    // has no effect in others.
-    nsBlockFrame::BuildDisplayList(aBuilder, aDirtyRect, tempList);
-  }
-
-  tempList.BorderBackground()->DeleteAll();
-
-  tempList.MoveTo(aLists);
-
-  // Disabled file controls don't pass mouse events to their children, so we
-  // put an invisible item in the display list above the children
-  // just to catch events
-  nsEventStates eventStates = mContent->AsElement()->State();
-  if (eventStates.HasState(NS_EVENT_STATE_DISABLED) && IsVisibleForPainting(aBuilder)) {
-    aLists.Content()->AppendNewToTop(
-      new (aBuilder) nsDisplayEventReceiver(aBuilder, this));
-  }
-
-  DisplaySelectionOverlay(aBuilder, aLists.Content());
+  BuildDisplayListForInline(aBuilder, aDirtyRect, aLists);
 }
 
 #ifdef ACCESSIBILITY
 a11y::AccType
 nsFileControlFrame::AccessibleType()
 {
   return a11y::eHTMLFileInputType;
 }
--- a/layout/reftests/forms/input/file/input-file-background-ref.xul
+++ b/layout/reftests/forms/input/file/input-file-background-ref.xul
@@ -1,19 +1,16 @@
 <?xml version="1.0"?>
 <?xml-stylesheet href="style.css" type="text/css"?>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style>
+    window {
+      background-color: blue;
+    }
+  </html:style>
+
   <vbox>
-    <html:style>
-      window {
-        background-color: blue;
-      }
-    </html:style>
     <html:div class='file'>
       <html:button>Browse&#8230;</html:button><label value="No file selected."/>
     </html:div>
-    <html:br/>
-    <html:div class='file'>
-      <html:button>Browse&#8230;</html:button><label value="No files selected."/>
-    </html:div>
   </vbox>
 </window>
--- a/layout/reftests/forms/input/file/input-file-background.html
+++ b/layout/reftests/forms/input/file/input-file-background.html
@@ -2,12 +2,10 @@
 <html>
   <style>
     body {
       background-color: blue;
     }
   </style>
   <body>
     <input type='file'>
-    <br>
-    <input type='file' multiple>
   </body>
 </html>
--- a/layout/reftests/forms/input/file/input-file-rtl-ref.xul
+++ b/layout/reftests/forms/input/file/input-file-rtl-ref.xul
@@ -1,17 +1,17 @@
 <?xml version="1.0"?>
 <?xml-stylesheet href="style.css" type="text/css"?>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">
   <vbox>
+    <html:style>
+      vbox {
+       margin-right: 8px;
+      }
+    </html:style>
     <html:div dir='rtl'>
       <html:div class='file' dir='rtl'>
         <html:button>Browse&#8230;</html:button><label value="No file selected."/>
       </html:div>
     </html:div>
-    <html:div dir='rtl'>
-      <html:div class='file' dir='rtl'>
-        <html:button>Browse&#8230;</html:button><label value="No files selected."/>
-      </html:div>
-    </html:div>
   </vbox>
 </window>
--- a/layout/reftests/forms/input/file/input-file-rtl.html
+++ b/layout/reftests/forms/input/file/input-file-rtl.html
@@ -1,11 +1,8 @@
 <!DOCTYPE html>
 <html>
   <body>
     <div dir='rtl'>
       <input type='file'>
     </div>
-    <div dir='rtl'>
-      <input type='file' multiple>
-    </div>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/file/input-file-style-ref.xul
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml">
+  <hbox>
+    <html:style>
+      .file {
+        background-color: blue;
+        border: 1px red solid;
+        width: 400px;
+        padding: 2px;
+        margin: 5px;
+        display: inline-block;
+      }
+
+      .file > label {
+        /* color only applies to the label */
+        color: white;
+      }
+    </html:style>
+    <html:div class='file'>
+      <html:button>Browse&#8230;</html:button><label value="No file selected."/>
+    </html:div>
+  </hbox>
+</window>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/file/input-file-style.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    input {
+      background-color: blue;
+      border: 1px red solid;
+      width: 400px;
+      color: white;
+      padding: 2px;
+      margin: 5px;
+    }
+  </style>
+  <body>
+    <input type='file'>
+  </body>
+</html>
rename from layout/reftests/forms/input-file-width-clip-ref.html
rename to layout/reftests/forms/input/file/input-file-width-clip-ref.html
rename from layout/reftests/forms/input-file-width-clip-1.html
rename to layout/reftests/forms/input/file/input-file-width-clip.html
--- a/layout/reftests/forms/input/file/reftest.list
+++ b/layout/reftests/forms/input/file/reftest.list
@@ -1,4 +1,7 @@
-fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-simple.html input-file-simple-ref.xul # b2g failure is bug 855352
-fails-if(B2G) fuzzy-if(OSX==10.6,8,114) == input-file-rtl.html input-file-rtl-ref.xul # b2g failure is bug 855352
-fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-size.html input-file-simple-ref.xul # b2g failure is bug 855352
-fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-background.html input-file-background-ref.xul # b2g failure is bug 855352
+# B2G failures: bug 855352.
+fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-simple.html input-file-simple-ref.xul
+fails-if(B2G) fuzzy-if(OSX==10.6,8,64) == input-file-rtl.html input-file-rtl-ref.xul
+fails-if(B2G) fuzzy-if(OSX==10.6,8,128) == input-file-size.html input-file-simple-ref.xul
+fails-if(B2G) fuzzy-if(OSX==10.6,8,64) == input-file-background.html input-file-background-ref.xul
+fails-if(B2G) == input-file-style.html input-file-style-ref.xul
+!= input-file-width-clip.html input-file-width-clip-ref.html
--- a/layout/reftests/forms/input/file/style.css
+++ b/layout/reftests/forms/input/file/style.css
@@ -1,45 +1,46 @@
-vbox {
-  margin: 8px;
+vbox, hbox {
+  margin-top: 8px;
+  margin-left: 8px;
+  display: block;
 }
 
 .file {
-  display: inline;
-
   /* Copy of input properties that apply of forms.css below this */
   color: -moz-FieldText;
   font: -moz-field;
   text-rendering: optimizeLegibility;
   line-height: normal !important;
   text-align: start;
   text-transform: none;
   word-spacing: normal;
   letter-spacing: normal;
   text-indent: 0;
   -moz-user-select: text;
   text-shadow: none;
 
   /* Copy of the type=file part of forms.css below this */
-  -moz-appearance: none;
+  display: inline; /* this one isn't really a copy... */
   white-space: nowrap;
-  cursor: default;
-  -moz-binding: none;
+  overflow:hidden;
 
+  -moz-appearance: none;
+  -moz-binding: none;
+  cursor: default;
   border: none;
-  background-color: none;
-
-  padding: 0 !important;
+  background-color: transparent;
+  padding: 0;
 }
 
 .file > label {
   display: inline-block;
 
   /* Copy from forms.css below this */
-  width: 12em;
+  min-width: 12em;
   -moz-padding-start: 5px;
 
   color: inherit;
   font-size: inherit;
   letter-spacing: inherit;
 
   direction: ltr !important;
 }
--- a/layout/reftests/forms/reftest.list
+++ b/layout/reftests/forms/reftest.list
@@ -1,13 +1,12 @@
 
 == checkbox-label-dynamic.html checkbox-label-dynamic-ref.html
 skip-if(B2G) fails-if(Android) == checkbox-radio-stretched.html checkbox-radio-stretched-ref.html # test for bug 464589
 
-skip-if(B2G) == input-file-width-clip-1.html input-file-width-clip-ref.html # test for bug 409587
 == input-hidden-border.html about:blank
 == input-text-bounds-1.html input-text-bounds-1-ref.html
 == input-text-size-1.html input-text-size-1-ref.html
 skip-if(B2G) fails-if(Android) == input-text-size-2.html input-text-size-2-ref.html
 HTTP(..) == input-text-baseline-1.html input-text-baseline-1-ref.html
 HTTP(..) == input-text-centering-1.xul input-text-centering-1-ref.xul
 skip-if(B2G) fails-if(Android) HTTP(..) == text-control-baseline-1.html text-control-baseline-1-ref.html
 == input-text-dynamic-height-1.xul input-text-dynamic-height-1-ref.xul
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -406,30 +406,32 @@ input[type="image"]:disabled {
 
 input[type="image"]:-moz-focusring {
   /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
 }
 
 /* file selector */
 input[type="file"] {
-  -moz-appearance: none;
+  display: inline-block;
   white-space: nowrap;
+  overflow:hidden;
+
+  /* Revert rules which apply on all inputs. */
+  -moz-appearance: none;
+  -moz-binding: none;
   cursor: default;
-  -moz-binding: none;
 
   border: none;
   background-color: transparent;
-
-  /* TODO: check why. */
-  padding: 0 !important;
+  padding: 0;
 }
 
 input[type="file"] > xul|label {
-  width: 12em;
+  min-width: 12em;
   -moz-padding-start: 5px;
 
   color: inherit;
   font-size: inherit;
   letter-spacing: inherit;
 
   /*
    * Force the text to have LTR directionality. Otherwise filenames containing