Bug 839788 - Switch Browse button from an <input> to a <button>. r=bz

layout/forms/nsFileControlFrame.cpp

@@ -13,6 +13,7 @@
 #include "nsIComponentManager.h"
 #include "nsHTMLParts.h"
 #include "nsIDOMHTMLInputElement.h"
+#include "nsIDOMHTMLButtonElement.h"
 #include "nsIFormControl.h"
 #include "nsINameSpaceManager.h"
 #include "nsCOMPtr.h"
@@ -105,7 +106,7 @@ nsFileControlFrame::CreateAnonymousContent(nsTArray<ContentInfo>& aElements)
   nsCOMPtr<nsINodeInfo> nodeInfo;
 
   // Create and setup the file picking button.
-  nodeInfo = doc->NodeInfoManager()->GetNodeInfo(nsGkAtoms::input, nullptr,
+  nodeInfo = doc->NodeInfoManager()->GetNodeInfo(nsGkAtoms::button, nullptr,
                                                  kNameSpaceID_XHTML,
                                                  nsIDOMNode::ELEMENT_NODE);
   NS_NewHTMLElement(getter_AddRefs(mBrowse), nodeInfo.forget(),
@@ -116,15 +117,26 @@ nsFileControlFrame::CreateAnonymousContent(nsTArray<ContentInfo>& aElements)
                    NS_LITERAL_STRING("button"), false);
 
   // Set the file picking button text depending on the current locale.
-  nsXPIDLString buttonValue;
+  nsXPIDLString buttonTxt;
   nsContentUtils::GetLocalizedString(nsContentUtils::eFORMS_PROPERTIES,
-                                     "Browse", buttonValue);
-  mBrowse->SetAttr(kNameSpaceID_None, nsGkAtoms::value, buttonValue, false);
+                                     "Browse", buttonTxt);
+
+  // Set the browse button text. It's a bit of a pain to do because we want to
+  // make sure we are not notifying.
+  nsCOMPtr<nsIContent> textContent;
+  nsresult rv = NS_NewTextNode(getter_AddRefs(textContent),
+                               mBrowse->NodeInfo()->NodeInfoManager());
+  NS_ENSURE_SUCCESS(rv, rv);
+
+  textContent->SetText(buttonTxt, false);
+
+  rv = mBrowse->AppendChildTo(textContent, false);
+  NS_ENSURE_SUCCESS(rv, rv);
 
   // Make sure access key and tab order for the element actually redirect to the
   // file picking button.
   nsCOMPtr<nsIDOMHTMLInputElement> fileContent = do_QueryInterface(mContent);
-  nsCOMPtr<nsIDOMHTMLInputElement> browseControl = do_QueryInterface(mBrowse);
+  nsCOMPtr<nsIDOMHTMLButtonElement> browseControl = do_QueryInterface(mBrowse);
 
   nsAutoString accessKey;
   fileContent->GetAccessKey(accessKey);

layout/reftests/forms/input/file/input-file-rtl-ref.xul

@@ -5,12 +5,12 @@
   <vbox>
     <html:div dir='rtl'>
       <html:div class='file'>
-        <html:input type='button' value='Browse&#8230;'/><label value="No file selected."/>
+        <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:input type='button' value='Browse&#8230;'/><label value="No files selected."/>
+        <html:button>Browse&#8230;</html:button><label value="No files selected."/>
       </html:div>
     </html:div>
   </vbox>

layout/reftests/forms/input/file/input-file-simple-ref.xul

@@ -4,11 +4,11 @@
         xmlns:html="http://www.w3.org/1999/xhtml">
   <vbox>
     <html:div class='file'>
-      <html:input type='button' value='Browse&#8230;'/><label value="No file selected."/>
+      <html:button>Browse&#8230;</html:button><label value="No file selected."/>
     </html:div>
     <html:br/>
     <html:div class='file'>
-      <html:input type='button' value='Browse&#8230;'/><label value="No files selected."/>
+      <html:button>Browse&#8230;</html:button><label value="No files selected."/>
     </html:div>
   </vbox>
 </window>

layout/reftests/forms/input/file/style.css

@@ -43,7 +43,7 @@ vbox {
   padding-right: 1px;
 }
 
-.file > input[type='button'] {
+.file > button {
   height: inherit;
   font-size: inherit;
   letter-spacing: inherit;

layout/style/forms.css

@@ -439,7 +439,7 @@ input[type="file"] > xul|label {
 }
 
 /* button part of file selector */
-input[type="file"] > input[type="button"] {
+input[type="file"] > button[type="button"] {
   height: inherit;
   font-size: inherit;
   letter-spacing: inherit;
@@ -578,7 +578,7 @@ button::-moz-focus-inner,
 input[type="reset"]::-moz-focus-inner,
 input[type="button"]::-moz-focus-inner,
 input[type="submit"]::-moz-focus-inner,
-input[type="file"] > input[type="button"]::-moz-focus-inner {
+input[type="file"] > button[type="button"]::-moz-focus-inner {
   padding: 0px 2px 0px 2px;
   border: 1px dotted transparent;
 }
@@ -587,7 +587,7 @@ button:-moz-focusring::-moz-focus-inner,
 input[type="reset"]:-moz-focusring::-moz-focus-inner,
 input[type="button"]:-moz-focusring::-moz-focus-inner,
 input[type="submit"]:-moz-focusring::-moz-focus-inner,
-input[type="file"] > input[type="button"]:-moz-focusring::-moz-focus-inner {
+input[type="file"] > button[type="button"]:-moz-focusring::-moz-focus-inner {
   border-color: ButtonText;
 }