Bug 556145 - Use opacity instead of GrayText for ::-moz-placeholder UA's style. r=bz,davidb
authorMounir Lamouri <mounir.lamouri@gmail.com>
Fri, 09 Nov 2012 10:30:54 +0000
changeset 112812 f3faea7f51123dcb9e3545c9076d9d7caecd3629
parent 112811 b5dffbc5a1549fddfe0bea6f68f6ac2d08a5df31
child 112813 9d46cc58dc1a0fec4779bcb0c8e2ceda03c15a0f
push id23838
push usereakhgari@mozilla.com
push dateFri, 09 Nov 2012 15:21:51 +0000
treeherdermozilla-central@c39596b46863 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz, davidb
bugs556145
milestone19.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 556145 - Use opacity instead of GrayText for ::-moz-placeholder UA's style. r=bz,davidb
b2g/chrome/content/content.css
browser/themes/gnomestripe/devtools/common.css
browser/themes/gnomestripe/tabview/tabview.css
browser/themes/pinstripe/browser.css
browser/themes/pinstripe/devtools/common.css
browser/themes/pinstripe/tabview/tabview.css
browser/themes/winstripe/browser-aero.css
browser/themes/winstripe/browser.css
browser/themes/winstripe/devtools/common.css
browser/themes/winstripe/tabview/tabview.css
editor/reftests/xul/empty-1.xul
editor/reftests/xul/placeholder-reset.css
layout/reftests/css-placeholder/css-simple-styling.html
layout/reftests/css-placeholder/input/style.css
layout/reftests/css-placeholder/textarea/style.css
layout/reftests/forms/placeholder/placeholder-1-password.html
layout/reftests/forms/placeholder/placeholder-1-text.html
layout/reftests/forms/placeholder/placeholder-1-textarea.html
layout/reftests/forms/placeholder/placeholder-10.html
layout/reftests/forms/placeholder/placeholder-11.html
layout/reftests/forms/placeholder/placeholder-12.html
layout/reftests/forms/placeholder/placeholder-13.html
layout/reftests/forms/placeholder/placeholder-14.html
layout/reftests/forms/placeholder/placeholder-2-textarea.html
layout/reftests/forms/placeholder/placeholder-2.html
layout/reftests/forms/placeholder/placeholder-5.html
layout/reftests/forms/placeholder/placeholder-6-textarea.html
layout/reftests/forms/placeholder/placeholder-6.html
layout/reftests/forms/placeholder/placeholder-rtl.html
layout/reftests/forms/placeholder/placeholder-style.css
layout/style/forms.css
mobile/android/themes/core/content.css
mobile/xul/themes/core/content.css
mobile/xul/themes/core/gingerbread/content.css
toolkit/themes/faststripe/global/textbox.css
toolkit/themes/gnomestripe/global/textbox.css
toolkit/themes/pinstripe/global/textbox.css
toolkit/themes/pinstripe/mozapps/extensions/extensions.css
toolkit/themes/winstripe/global/textbox.css
--- a/b2g/chrome/content/content.css
+++ b/b2g/chrome/content/content.css
@@ -105,21 +105,16 @@ 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);
 }
 
 /* Selects are handled by the form helper, see bug 685197 */
 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"],
 * > input[type="button"],
 * > input[type="submit"],
 * > input[type="reset"],
 button {
   border-style: solid;
--- a/browser/themes/gnomestripe/devtools/common.css
+++ b/browser/themes/gnomestripe/devtools/common.css
@@ -143,16 +143,17 @@
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
   display: none;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
   color: hsl(208,10%,66%);
+  opacity: 1.0;
 }
 
 /* Close button */
 
 .devtools-closebutton {
   list-style-image: url("moz-icon://stock/gtk-close?size=menu");
   margin-top: 0;
   margin-bottom: 0;
--- a/browser/themes/gnomestripe/tabview/tabview.css
+++ b/browser/themes/gnomestripe/tabview/tabview.css
@@ -423,16 +423,17 @@ html[dir=rtl] input.name {
   cursor: default;
 }
 
 input.name:focus {
   color: WindowText;
 }
 
 input.name::-moz-placeholder {
+  opacity: 1.0;
   font-style: italic !important;
   color: transparent;
   background-image: url(chrome://browser/skin/tabview/edit-light.png);
   background-repeat: no-repeat;
   -moz-padding-start: 20px;
 }
 
 .title-container:hover input.name::-moz-placeholder {
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -1949,16 +1949,17 @@ window[tabsontop="false"] richlistitem[t
 
   #editBookmarkPanel .expander-up > .button-box > .button-icon,
   #editBookmarkPanel .expander-down > .button-box > .button-icon {
     width: 9px;
   }
 }
 
 #editBMPanel_tagsField > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
+  opacity: 1.0;
   color: #bbb;
 }
 
 .editBMPanel_rowLabel {
   text-align: end;
 }
 
 .panel-promo-box {
--- a/browser/themes/pinstripe/devtools/common.css
+++ b/browser/themes/pinstripe/devtools/common.css
@@ -148,16 +148,17 @@
   background-position: calc(100% - 4px) center, top left, top left;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
   display: none;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
+  opacity: 1.0;
   color: hsl(208,10%,66%);
 }
 
 /* Close button */
 
 .devtools-closebutton {
   list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
   -moz-image-region: rect(0, 16px, 16px, 0);
--- a/browser/themes/pinstripe/tabview/tabview.css
+++ b/browser/themes/pinstripe/tabview/tabview.css
@@ -415,16 +415,17 @@ html[dir=rtl] input.name {
   cursor: default;
 }
 
 input.name:focus {
   color: #555;
 }
 
 input.name::-moz-placeholder {
+  opacity: 1.0;
   font-style: italic !important;
   color: transparent;
   background-image: url(chrome://browser/skin/tabview/edit-light.png);
   background-repeat: no-repeat;
   -moz-padding-start: 20px;
 }
 
 .title-container:hover input.name::-moz-placeholder {
--- a/browser/themes/winstripe/browser-aero.css
+++ b/browser/themes/winstripe/browser-aero.css
@@ -289,16 +289,17 @@
   #navigator-toolbox[tabsontop=false] .searchbar-textbox:not(:-moz-lwtheme) {
     background-color: rgba(255,255,255,.725);
     @navbarTextboxCustomBorder@
     color: black;
   }
 
   #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;
   }
 
   #navigator-toolbox[tabsontop=false] #urlbar:not(:-moz-lwtheme):hover,
   #navigator-toolbox[tabsontop=false] .searchbar-textbox:not(:-moz-lwtheme):hover {
     background-color: rgba(255,255,255,.898);
   }
 
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -1240,16 +1240,17 @@ toolbar[mode=full] .toolbarbutton-1 > .t
 @conditionalForwardWithUrlbar@ + #urlbar-container:-moz-locale-dir(rtl),
 @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(rtl) {
   /* let winstripe-urlbar-back-button-mask clip the urlbar's right side for RTL */
   transform: scaleX(-1);
 }
 
 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;
 }
 
 #urlbar:-moz-lwtheme[focused="true"],
 .searchbar-textbox:-moz-lwtheme[focused="true"] {
   background-color: white;
 }
 
--- a/browser/themes/winstripe/devtools/common.css
+++ b/browser/themes/winstripe/devtools/common.css
@@ -154,16 +154,17 @@
   background-position: calc(100% - 4px) center, top left, top left;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
   display: none;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
+  opacity: 1.0;
   color: hsl(208,10%,66%);
 }
 
 /* Close button */
 
 .devtools-closebutton {
   list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
   -moz-image-region: rect(0, 16px, 16px, 0);
--- a/browser/themes/winstripe/tabview/tabview.css
+++ b/browser/themes/winstripe/tabview/tabview.css
@@ -438,16 +438,17 @@ html[dir=rtl] input.name {
   cursor: default;
 }
 
 input.name:focus {
   color: #555;
 }
 
 input.name::-moz-placeholder {
+  opacity: 1.0;
   font-style: italic !important;
   color: transparent;
   background-image: url(chrome://browser/skin/tabview/edit-light.png);
   background-repeat: no-repeat;
   -moz-padding-start: 20px;
 }
 
 .title-container:hover input.name::-moz-placeholder {
--- a/editor/reftests/xul/empty-1.xul
+++ b/editor/reftests/xul/empty-1.xul
@@ -1,10 +1,11 @@
 <?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"
         title="Textbox tests">
 
   <script type="text/javascript" src="platform.js"/>
 
   <textbox placeholder="test"/>
new file mode 100644
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
--- a/layout/reftests/css-placeholder/css-simple-styling.html
+++ b/layout/reftests/css-placeholder/css-simple-styling.html
@@ -11,16 +11,17 @@
      */
     input, textarea {
       font: -moz-list;
       font-family: mono;
       font-style: italic;
     }
 
     :-moz-any(input, textarea)::-moz-placeholder {
+      opacity: 1.0;
       font: -moz-list;
       font-family: mono;
       font-style: italic;
       color: blue;
       word-spacing: 5px;
       text-shadow: 1px 1px 1px red;
     }
   </style>
--- a/layout/reftests/css-placeholder/input/style.css
+++ b/layout/reftests/css-placeholder/input/style.css
@@ -1,4 +1,5 @@
 input::-moz-placeholder,
 input.ref {
   color: green;
+  opacity: 1.0;
 }
--- a/layout/reftests/css-placeholder/textarea/style.css
+++ b/layout/reftests/css-placeholder/textarea/style.css
@@ -1,4 +1,5 @@
 textarea::-moz-placeholder,
 textarea.ref {
   color: green;
+  opacity: 1.0;
 }
--- a/layout/reftests/forms/placeholder/placeholder-1-password.html
+++ b/layout/reftests/forms/placeholder/placeholder-1-password.html
@@ -1,7 +1,8 @@
 <!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>
 </html>
--- a/layout/reftests/forms/placeholder/placeholder-1-text.html
+++ b/layout/reftests/forms/placeholder/placeholder-1-text.html
@@ -1,7 +1,8 @@
 <!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>
 </html>
--- a/layout/reftests/forms/placeholder/placeholder-1-textarea.html
+++ b/layout/reftests/forms/placeholder/placeholder-1-textarea.html
@@ -1,7 +1,8 @@
 <!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>
 </html>
--- a/layout/reftests/forms/placeholder/placeholder-10.html
+++ b/layout/reftests/forms/placeholder/placeholder-10.html
@@ -1,11 +1,12 @@
 <!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()
     {
       document.getElementById('p1').focus();
     }
     function setPlaceholder()
     {
       document.getElementById('p1').placeholder = 'my placeholder';
--- a/layout/reftests/forms/placeholder/placeholder-11.html
+++ b/layout/reftests/forms/placeholder/placeholder-11.html
@@ -1,7 +1,8 @@
 <!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>
 </html>
--- a/layout/reftests/forms/placeholder/placeholder-12.html
+++ b/layout/reftests/forms/placeholder/placeholder-12.html
@@ -1,7 +1,8 @@
 <!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>
 </html>
--- a/layout/reftests/forms/placeholder/placeholder-13.html
+++ b/layout/reftests/forms/placeholder/placeholder-13.html
@@ -1,11 +1,12 @@
 <!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()
     {
       document.getElementById('p1').placeholder = 'my\r placeholder';
     }
     function disableReftestWait()
     {
       document.documentElement.className = '';
--- a/layout/reftests/forms/placeholder/placeholder-14.html
+++ b/layout/reftests/forms/placeholder/placeholder-14.html
@@ -1,11 +1,12 @@
 <!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()
     {
       document.getElementById('p1').placeholder = 'my\n placeholder';
     }
     function disableReftestWait()
     {
       document.documentElement.className = '';
--- a/layout/reftests/forms/placeholder/placeholder-2-textarea.html
+++ b/layout/reftests/forms/placeholder/placeholder-2-textarea.html
@@ -1,11 +1,12 @@
 <!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()
     {
       document.getElementById('p1').placeholder = "my placeholder";
     }
     function disableReftestWait()
     {
       document.documentElement.className = '';
--- a/layout/reftests/forms/placeholder/placeholder-2.html
+++ b/layout/reftests/forms/placeholder/placeholder-2.html
@@ -1,11 +1,12 @@
 <!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()
     {
       document.getElementById('p1').placeholder = "my placeholder";
     }
     function disableReftestWait()
     {
       document.documentElement.className = '';
--- a/layout/reftests/forms/placeholder/placeholder-5.html
+++ b/layout/reftests/forms/placeholder/placeholder-5.html
@@ -1,11 +1,12 @@
 <!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()
     {
       document.getElementById('p1').value = "";
     }
     function disableReftestWait()
     {
       document.documentElement.className = '';
--- a/layout/reftests/forms/placeholder/placeholder-6-textarea.html
+++ b/layout/reftests/forms/placeholder/placeholder-6-textarea.html
@@ -1,7 +1,8 @@
 <!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>
 </html>
--- a/layout/reftests/forms/placeholder/placeholder-6.html
+++ b/layout/reftests/forms/placeholder/placeholder-6.html
@@ -1,7 +1,8 @@
 <!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>
 </html>
--- a/layout/reftests/forms/placeholder/placeholder-rtl.html
+++ b/layout/reftests/forms/placeholder/placeholder-rtl.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html dir='rtl'>
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
   <body>
     <input placeholder='foo'>
     <textarea placeholder='foo'></textarea>
   </body>
 </html>
--- a/layout/reftests/forms/placeholder/placeholder-style.css
+++ b/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;
 }
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -164,17 +164,17 @@ textarea::-moz-placeholder {
   overflow: hidden !important;
 
   /*
    * The placeholder should be ignored by pointer otherwise, we might have some
    * unexpected behavior like the resize handle not being selectable.
    */
   pointer-events: none !important;
 
-  color: GrayText;
+  opacity: 0.54;
 }
 
 textarea::-moz-placeholder {
   white-space: pre-wrap !important;
 }
 
 input:-moz-read-write,
 textarea:-moz-read-write {
--- a/mobile/android/themes/core/content.css
+++ b/mobile/android/themes/core/content.css
@@ -136,21 +136,16 @@ 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);
 }
 
 /* Selects are handled by the form helper, see bug 685197 */
 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"],
 * > input[type="button"],
 * > input[type="submit"],
 * > input[type="reset"],
 button {
   border-style: solid;
--- a/mobile/xul/themes/core/content.css
+++ b/mobile/xul/themes/core/content.css
@@ -128,21 +128,16 @@ 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);
 }
 
 /* Selects are handled by the form helper, see bug 685197 */
 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"],
 * > input[type="button"],
 * > input[type="submit"],
 * > input[type="reset"],
 button {
   border-style: solid;
--- a/mobile/xul/themes/core/gingerbread/content.css
+++ b/mobile/xul/themes/core/gingerbread/content.css
@@ -128,21 +128,16 @@ select[size][multiple],
 textarea,
 * > input:not([type="image"]) {
   border-style: solid;
   border-color: #7d7d7d;
   color: #414141;
   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"],
 * > input[type="button"],
 * > input[type="submit"],
 * > input[type="reset"],
 button {
   border-style: solid;
--- a/toolkit/themes/faststripe/global/textbox.css
+++ b/toolkit/themes/faststripe/global/textbox.css
@@ -26,21 +26,16 @@ html|*.textbox-textarea {
   margin: 0px !important;
   border: none !important;
   padding: 0px !important;
   background-color: inherit;
   color: inherit;
   font: inherit;
 }
 
-html|*.textbox-input::-moz-placeholder,
-html|*.textbox-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 .textbox-contextmenu {
   cursor: default;
 }
 
 /* ..... readonly state ..... */
 
 textbox[readonly="true"] {
   background-color: -moz-Dialog;
--- a/toolkit/themes/gnomestripe/global/textbox.css
+++ b/toolkit/themes/gnomestripe/global/textbox.css
@@ -31,21 +31,16 @@ html|*.textbox-textarea {
   margin: 0px !important;
   border: none !important;
   padding: 0px !important;
   background-color: inherit;
   color: inherit;
   font: inherit;
 }
 
-html|*.textbox-input::-moz-placeholder,
-html|*.textbox-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 .textbox-contextmenu {
   cursor: default;
 }
 
 /* ..... readonly state ..... */
 
 textbox[readonly="true"] {
   background-color: -moz-Dialog;
--- a/toolkit/themes/pinstripe/global/textbox.css
+++ b/toolkit/themes/pinstripe/global/textbox.css
@@ -27,21 +27,16 @@ html|*.textbox-textarea {
   margin: 0px !important;
   border: none !important;
   padding: 0px !important;
   background-color: inherit;
   color: inherit;
   font: inherit;
 }
 
-html|*.textbox-input::-moz-placeholder,
-html|*.textbox-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 .textbox-contextmenu {
   cursor: default;
 }
 
 textbox[focused="true"] {
   -moz-border-top-colors: -moz-mac-focusring -moz-mac-focusring #000000;
   -moz-border-right-colors: -moz-mac-focusring -moz-mac-focusring #000000;
   -moz-border-bottom-colors: -moz-mac-focusring -moz-mac-focusring #000000;
--- a/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
@@ -324,16 +324,17 @@
 }
 
 #header-search > .textbox-input-box:-moz-locale-dir(rtl) {
   background-position: right;
 }
 
 #header-search > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
   color: #5C6470;
+  opacity: 1.0;
 }
 
 .view-header {
   padding: 4px;
   margin: 0;
   min-height: 31px;
   border-bottom: 1px solid rgba(50, 65, 92, 0.4);
   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
--- a/toolkit/themes/winstripe/global/textbox.css
+++ b/toolkit/themes/winstripe/global/textbox.css
@@ -31,21 +31,16 @@ html|*.textbox-textarea {
   margin: 0px !important;
   border: none !important;
   padding: 0px !important;
   background-color: inherit;
   color: inherit;
   font: inherit;
 }
 
-html|*.textbox-input::-moz-placeholder,
-html|*.textbox-textarea::-moz-placeholder {
-  color: GrayText;
-}
-
 .textbox-contextmenu {
   cursor: default;
 }
 
 /* ..... readonly state ..... */
 
 textbox[readonly="true"] {
   background-color: -moz-Dialog;