Bug 508586: Use border-image for buttons (hildon), r=vingtetun

mobile/themes/hildon/jar.mn

@@ -72,6 +72,12 @@ chrome.jar:
   images/toggledarkmiddle-inactive-64.png  (images/toggledarkmiddle-inactive-64.png)
   images/toggledarkright-active-64.png     (images/toggledarkright-active-64.png)
   images/toggledarkright-inactive-64.png   (images/toggledarkright-inactive-64.png)
+  images/button-default-64.png         (images/button-default-64.png)
+  images/button-active-64.png          (images/button-active-64.png)
+  images/buttondark-default-64.png     (images/buttondark-default-64.png)
+  images/buttondark-active-64.png      (images/buttondark-active-64.png)
+  images/toolbarbutton-default-64.png  (images/toolbarbutton-default-64.png)
+  images/toolbarbutton-active-64.png   (images/toolbarbutton-active-64.png)
   images/lock-40.png                   (images/lock-40.png)
   images/unlock-40.png                 (images/unlock-40.png)
   images/close-30.png                  (images/close-30.png)

mobile/themes/hildon/platform.css

@@ -84,37 +84,44 @@ richlistitem {
 button {
   min-width: 12mm !important; /* button size */
   min-height: 12mm !important; /* button size */
-  color: #36373b;
+  color: #000;
   padding: 0.5mm 1mm;
-  -moz-border-radius: 2mm;
-  -moz-border-top-colors: -moz-initial;
-  -moz-border-right-colors: -moz-initial;
-  -moz-border-left-colors: -moz-initial;
-  -moz-border-bottom-colors: -moz-initial;
-  border: 0.1mm solid #36373b;
-  background: #efefef;
+  border-width: 8px;
+  -moz-border-image: url("chrome://browser/skin/images/button-default-64.png") 8 repeat repeat;
+  -moz-appearance: none !important;
+}
+
+button:not([disabled="true"]):active {
+  -moz-border-image: url("chrome://browser/skin/images/button-active-64.png") 8 repeat repeat;
 }
 
 button[disabled="true"] {
-  color: #ccc;
-  -moz-border-top-colors: -moz-initial !important;
-  -moz-border-right-colors: -moz-initial !important;
-  -moz-border-left-colors: -moz-initial !important;
-  -moz-border-bottom-colors: -moz-initial !important;
-  border: 0.1mm solid #ccc;
-  background: #fff;
+  color: #aaa;
 }
 
-/* XXX needs to be updated */
-button:active {
-  -moz-border-top-colors: -moz-initial;
-  -moz-border-right-colors: -moz-initial;
-  -moz-border-left-colors: -moz-initial;
-  -moz-border-bottom-colors: -moz-initial;
-  border: 0.1mm solid #aaa;
-  background: #ddd;
+/* dark buttons ------------------------------------------------------------ */
+/*
+  we set notification buttons here as well, since the style can't be set in
+  scoped CSS file, like notification.css, when the buttons are added later
+*/
+
+button.button-dark,
+notification button {
+  color: #fff;
+  background-color: transparent;
+  -moz-border-image: url("chrome://browser/skin/images/buttondark-default-64.png") 8 repeat repeat;
 }
 
+button.button-dark:not([disabled="true"]):active,
+notification button:not([disabled="true"]):active {
+  -moz-border-image: url("chrome://browser/skin/images/buttondark-active-64.png") 8 repeat repeat;
+}
+
+button.button-dark[disabled="true"] {
+  color: #ddd;
+}
+
+/* toolbar buttons --------------------------------------------------------- */
 toolbarbutton {
   min-width: 17mm !important; /* primary button size */
   min-height: 17mm !important; /* primary button size */
@@ -140,28 +147,24 @@ toolbarbutton[open="true"] {
 }
 
 /* dark buttons ------------------------------------------------------------ */
-.button-dark {
+toolbarbutton.button-dark {
   color: #fff;
   padding: 0.5mm 1mm;
-  -moz-border-radius: 2mm;
-  border: 1px solid #777 !important;
-  background: #525252;
+  border-width: 10px;
+  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-64.png") 10 repeat repeat;
 }
 
-.button-dark:active {
-  border: 1px solid #202020 !important;
-  background: #303030;
+toolbarbutton.button-dark:not([disabled="true"]):active {
+  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-64.png") 10 repeat repeat;
 }
 
-.button-dark[disabled="true"],
-.button-dark[disabled="true"]:active {
-  border: 1px solid #515151;
-  background: #36373b;
+toolbarbutton.button-dark[disabled="true"] {
+  color: #ddd;
 }
 
-.button-dark[checked="true"] {
+toolbarbutton.button-dark[checked="true"] {
   /* checked overrides */
-  border: 0.1mm solid #202020 !important;
+  border: 8px solid transparent !important;
   background: #303030 !important;
   padding: 0.5mm 1mm !important;
 }