Bug 1051861 - Use Unicode gear symbol as the customize button's label for high contrast mode. r=adw

browser/base/content/newtab/newTab.css

@@ -22,8 +22,8 @@ body {
 }
 
 input {
-  font: message-box !important;
-  font-size: 16px !important;
+  font: message-box;
+  font-size: 16px;
 }
 
 input[type=button] {

browser/base/content/newtab/newTab.xhtml

@@ -84,7 +84,9 @@
     </div>
     <div id="newtab-margin-bottom"/>
   </div>
-  <input id="newtab-customize-button" type="button" dir="&locale.dir;" title="&newtab.customize.title;"/>
+  <input id="newtab-customize-button" type="button" dir="&locale.dir;"
+         value="&#x2699;"
+         title="&newtab.customize.title;"/>
 </body>
 <script type="text/javascript;version=1.8" src="chrome://browser/content/contentSearchUI.js"/>
 <script type="text/javascript;version=1.8" src="chrome://browser/content/newtab/newTab.js"/>

browser/themes/shared/newtab/newTab.inc.css

@@ -85,6 +85,13 @@
   width: 28px;
 }
 
+#newtab-customize-button {
+  font-size: 28px;
+  padding: 0;
+  /* only display the text label when CSS backgrounds are disabled (e.g. in high contrast mode) */
+  color: transparent;
+}
+
 #newtab-customize-button:-moz-any(:hover, :active, [active]) {
   background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32);
   background-color: #FFFFFF;