Bug 556145 - Use opacity instead of GrayText for ::-moz-placeholder UA's style. r=bz,davidb

b2g/chrome/content/content.css

@@ -110,11 +110,6 @@ select option, select optgroup {
   pointer-events: none;
 }
 
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 select:not([size]):not([multiple]),
 select[size="0"],
 select[size="1"],

browser/themes/gnomestripe/devtools/common.css

@@ -148,6 +148,7 @@
 
 .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
   color: hsl(208,10%,66%);
+  opacity: 1.0;
 }
 
 /* Close button */

browser/themes/gnomestripe/tabview/tabview.css

@@ -428,6 +428,7 @@ input.name:focus {
 }
 
 input.name::-moz-placeholder {
+  opacity: 1.0;
   font-style: italic !important;
   color: transparent;
   background-image: url(chrome://browser/skin/tabview/edit-light.png);

browser/themes/pinstripe/browser.css

@@ -1954,6 +1954,7 @@ window[tabsontop="false"] richlistitem[type~="action"][actiontype="switchtab"][s
 }
 
 #editBMPanel_tagsField > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
+  opacity: 1.0;
   color: #bbb;
 }
 

browser/themes/pinstripe/devtools/common.css

@@ -153,6 +153,7 @@
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
+  opacity: 1.0;
   color: hsl(208,10%,66%);
 }
 

browser/themes/pinstripe/tabview/tabview.css

@@ -420,6 +420,7 @@ input.name:focus {
 }
 
 input.name::-moz-placeholder {
+  opacity: 1.0;
   font-style: italic !important;
   color: transparent;
   background-image: url(chrome://browser/skin/tabview/edit-light.png);

browser/themes/winstripe/browser-aero.css

@@ -294,6 +294,7 @@
 
   #navigator-toolbox[tabsontop=false] html|*.urlbar-input:not(:-moz-lwtheme)::-moz-placeholder,
   #navigator-toolbox[tabsontop=false] .searchbar-textbox > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input:not(:-moz-lwtheme)::-moz-placeholder {
+    opacity: 1.0;
     color: #777;
   }
 

browser/themes/winstripe/browser.css

@@ -1245,6 +1245,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 
 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
+  opacity: 1.0;
   color: #777;
 }
 

browser/themes/winstripe/devtools/common.css

@@ -159,6 +159,7 @@
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
+  opacity: 1.0;
   color: hsl(208,10%,66%);
 }
 

browser/themes/winstripe/tabview/tabview.css

@@ -443,6 +443,7 @@ input.name:focus {
 }
 
 input.name::-moz-placeholder {
+  opacity: 1.0;
   font-style: italic !important;
   color: transparent;
   background-image: url(chrome://browser/skin/tabview/edit-light.png);

editor/reftests/xul/empty-1.xul

@@ -1,5 +1,6 @@
 <?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="placeholder-reset.css" type="text/css"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"

editor/reftests/xul/placeholder-reset.css

@@ -0,0 +1,8 @@
+@namespace url('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul');
+@namespace html url('http://www.w3.org/1999/xhtml');
+
+/* We need to have a non-transparent placeholder so we can test it. */
+html|input::-moz-placeholder {
+  opacity: 1.0;
+  color: graytext;
+}

layout/reftests/css-placeholder/css-simple-styling.html

@@ -16,6 +16,7 @@
     }
 
     :-moz-any(input, textarea)::-moz-placeholder {
+      opacity: 1.0;
       font: -moz-list;
       font-family: mono;
       font-style: italic;

layout/reftests/css-placeholder/input/style.css

@@ -1,4 +1,5 @@
 input::-moz-placeholder,
 input.ref {
   color: green;
+  opacity: 1.0;
 }

layout/reftests/css-placeholder/textarea/style.css

@@ -1,4 +1,5 @@
 textarea::-moz-placeholder,
 textarea.ref {
   color: green;
+  opacity: 1.0;
 }

layout/reftests/forms/placeholder/placeholder-1-password.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: placeholder should be used by input password elements -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <body>
     <input type="password" value="" placeholder="my placeholder">
   </body>

layout/reftests/forms/placeholder/placeholder-1-text.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: placeholder should be used by input text elements -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <body>
     <input type="text" value="" placeholder="my placeholder">
   </body>

layout/reftests/forms/placeholder/placeholder-1-textarea.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: placeholder should be used by textarea elements -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <body>
     <textarea placeholder="my placeholder"></textarea>
   </body>

layout/reftests/forms/placeholder/placeholder-10.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: when unfocused, if value='', newest placeholder should be shown -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <script type="text/javascript">
     function focusPlaceholder()
     {

layout/reftests/forms/placeholder/placeholder-11.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: placeholder shouldn't show new lines (&#10; version) -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <body>
     <input type="text" value="" placeholder="my&#10; placeholder">
   </body>

layout/reftests/forms/placeholder/placeholder-12.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: placeholder shouldn't show new lines (&#13; version) -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <body>
     <input type="text" value="" placeholder="my&#13; placeholder">
   </body>

layout/reftests/forms/placeholder/placeholder-13.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: placeholder shouldn't show new lines (\r version) -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <script type="text/javascript">
     function setPlaceholder()
     {

layout/reftests/forms/placeholder/placeholder-14.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: placeholder shouldn't show new lines (\n version) -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <script type="text/javascript">
     function setPlaceholder()
     {

layout/reftests/forms/placeholder/placeholder-2-textarea.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: placeholder has to be used if set via javascript -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <script type="text/javascript">
     function setPlaceholder()
     {

layout/reftests/forms/placeholder/placeholder-2.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: placeholder has to be used if set via javascript -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <script type="text/javascript">
     function setPlaceholder()
     {

layout/reftests/forms/placeholder/placeholder-5.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: placeholder has to be shown if value is reseted via javascript -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <script type="text/javascript">
     function setValue()
     {

layout/reftests/forms/placeholder/placeholder-6-textarea.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <!-- Test placeholder behavior when textarea is too small -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <body>
     <textarea cols="5" rows="3" placeholder="my placeholder"></textarea>
   </body>

layout/reftests/forms/placeholder/placeholder-6.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <!-- Test placeholder behavior when input is too small -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <body>
     <input type="text" size="5" value="" placeholder="my placeholder">
   </body>

layout/reftests/forms/placeholder/placeholder-rtl.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html dir='rtl'>
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <body>
     <input placeholder='foo'>
     <textarea placeholder='foo'></textarea>

layout/reftests/forms/placeholder/placeholder-style.css

@@ -1,4 +1,10 @@
 textarea.placeholder,
-input.placeholder {
+input.placeholder,
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  /* Unfortunately, we can't style the <input> or <textarea> text so we can't
+     set it to opacity: 0.54; which means we have to revert the style to
+     something that doesn't include an opacity. */
   color: GrayText;
+  opacity: 1.0;
 }

layout/style/forms.css

@@ -169,7 +169,7 @@ textarea::-moz-placeholder {
    */
   pointer-events: none !important;
 
-  color: GrayText;
+  opacity: 0.54;
 }
 
 textarea::-moz-placeholder {

mobile/android/themes/core/content.css

@@ -141,11 +141,6 @@ select option, select optgroup {
   pointer-events: none;
 }
 
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 select:not([size]):not([multiple]),
 select[size="0"],
 select[size="1"],

mobile/xul/themes/core/content.css

@@ -133,11 +133,6 @@ select option, select optgroup {
   pointer-events: none;
 }
 
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 select:not([size]):not([multiple]),
 select[size="0"],
 select[size="1"],

mobile/xul/themes/core/gingerbread/content.css

@@ -133,11 +133,6 @@ textarea,
   background: white -moz-linear-gradient(top, rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 3px, rgba(255,255,255,0.2) 16px);
 }
 
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 select:not([size]):not([multiple]),
 select[size="0"],
 select[size="1"],

toolkit/themes/faststripe/global/textbox.css

@@ -31,11 +31,6 @@ html|*.textbox-textarea {
   font: inherit;
 }
 
-html|*.textbox-input::-moz-placeholder,
-html|*.textbox-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 .textbox-contextmenu {
   cursor: default;
 }

toolkit/themes/gnomestripe/global/textbox.css

@@ -36,11 +36,6 @@ html|*.textbox-textarea {
   font: inherit;
 }
 
-html|*.textbox-input::-moz-placeholder,
-html|*.textbox-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 .textbox-contextmenu {
   cursor: default;
 }

toolkit/themes/pinstripe/global/textbox.css

@@ -32,11 +32,6 @@ html|*.textbox-textarea {
   font: inherit;
 }
 
-html|*.textbox-input::-moz-placeholder,
-html|*.textbox-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 .textbox-contextmenu {
   cursor: default;
 }

toolkit/themes/pinstripe/mozapps/extensions/extensions.css

@@ -329,6 +329,7 @@
 
 #header-search > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
   color: #5C6470;
+  opacity: 1.0;
 }
 
 .view-header {

toolkit/themes/winstripe/global/textbox.css

@@ -36,11 +36,6 @@ html|*.textbox-textarea {
   font: inherit;
 }
 
-html|*.textbox-input::-moz-placeholder,
-html|*.textbox-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 .textbox-contextmenu {
   cursor: default;
 }