Bug 1022582 - Make in-content checkboxes and radiobuttons visible on HC themes. r=jaws
authorRichard Marti <richard.marti@gmail.com>
Wed, 10 Dec 2014 20:44:29 +0100
changeset 235881 56ba684600e15eb9d47945cce8d2180df1d5448f
parent 235880 81ffd30de127fc8230a64b1f7dc766fd40ad9f11
child 235882 477d76b9d58d93cdbb183e76eee52c936ee4d53c
push id7472
push userraliiev@mozilla.com
push dateMon, 12 Jan 2015 20:36:27 +0000
treeherdermozilla-aurora@300ca104f8fb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1022582
milestone37.0a1
Bug 1022582 - Make in-content checkboxes and radiobuttons visible on HC themes. r=jaws
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/linux/global/jar.mn
toolkit/themes/osx/global/jar.mn
toolkit/themes/shared/in-content/check.png
toolkit/themes/shared/in-content/check.svg
toolkit/themes/shared/in-content/check@2x.png
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/shared/in-content/radio.svg
toolkit/themes/windows/global/in-content/common.css
toolkit/themes/windows/global/jar.mn
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -41,22 +41,40 @@ xul|menulist:not([editable="true"]) > xu
   margin-bottom: 6px;
 }
 
 xul|checkbox {
   -moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox");
   -moz-box-align: center;
 }
 
+xul|*.checkbox-check {
+  background-image: none !important;
+}
+
+xul|*.checkbox-check[checked] {
+  list-style-image: url("chrome://global/skin/in-content/check.svg#check-native");
+  background-color: -moz-dialog;
+}
+
 xul|radio {
   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
   -moz-box-align: center;
   -moz-margin-start: 0;
 }
 
+xul|*.radio-check {
+  background-image: none;
+}
+
+xul|*.radio-check[selected] {
+  list-style-image: url("chrome://global/skin/in-content/radio.svg#radio-native");
+  background-color: -moz-dialog;
+}
+
 xul|*.radio-label-box {
   -moz-appearance: none;
 }
 
 xul|*.numberbox-input-box {
   -moz-appearance: none;
   border-width: 0;
 }
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -51,15 +51,15 @@ toolkit.jar:
 +  skin/classic/global/icons/panelarrow-vertical.svg           (icons/panelarrow-vertical.svg)
 +  skin/classic/global/icons/resizer.png                       (icons/resizer.png)
 +  skin/classic/global/icons/sslWarning.png                    (icons/sslWarning.png)
 +  skin/classic/global/icons/wrap.png                          (icons/wrap.png)
 +  skin/classic/global/icons/webapps-16.png                    (icons/webapps-16.png)
 +  skin/classic/global/icons/webapps-64.png                    (icons/webapps-64.png)
    skin/classic/global/menu/shared-menu-check.png              (../../shared/menu-check.png)
 *  skin/classic/global/in-content/common.css                   (in-content/common.css)
-   skin/classic/global/in-content/check.png                    (../../shared/in-content/check.png)
-   skin/classic/global/in-content/check@2x.png                 (../../shared/in-content/check@2x.png)
+   skin/classic/global/in-content/check.svg                    (../../shared/in-content/check.svg)
    skin/classic/global/in-content/dropdown.svg                 (../../shared/in-content/dropdown.svg)
    skin/classic/global/in-content/help-glyph.svg               (../../shared/in-content/help-glyph.svg)
+   skin/classic/global/in-content/radio.svg                    (../../shared/in-content/radio.svg)
    skin/classic/global/in-content/sorter.png                   (../../shared/in-content/sorter.png)
    skin/classic/global/in-content/sorter@2x.png                (../../shared/in-content/sorter@2x.png)
 +  skin/classic/global/toolbar/spring.png                      (toolbar/spring.png)
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -181,20 +181,20 @@ toolkit.jar:
   skin/classic/global/media/volume-empty@2x.png                      (media/volume-empty@2x.png)
   skin/classic/global/media/volume-full.png                          (media/volume-full.png)
   skin/classic/global/media/volume-full@2x.png                       (media/volume-full@2x.png)
   skin/classic/global/media/clicktoplay-bgtexture.png                (media/clicktoplay-bgtexture.png)
   skin/classic/global/media/videoClickToPlayButton.svg               (media/videoClickToPlayButton.svg)
   skin/classic/global/menu/shared-menu-check.png                     (../../shared/menu-check.png)
   skin/classic/global/menu/shared-menu-check@2x.png                  (../../shared/menu-check@2x.png)
 * skin/classic/global/in-content/common.css                          (in-content/common.css)
-  skin/classic/global/in-content/check.png                           (../../shared/in-content/check.png)
-  skin/classic/global/in-content/check@2x.png                        (../../shared/in-content/check@2x.png)
+  skin/classic/global/in-content/check.svg                           (../../shared/in-content/check.svg)
   skin/classic/global/in-content/dropdown.svg                        (../../shared/in-content/dropdown.svg)
   skin/classic/global/in-content/help-glyph.svg                      (../../shared/in-content/help-glyph.svg)
+  skin/classic/global/in-content/radio.svg                           (../../shared/in-content/radio.svg)
   skin/classic/global/in-content/sorter.png                          (../../shared/in-content/sorter.png)
   skin/classic/global/in-content/sorter@2x.png                       (../../shared/in-content/sorter@2x.png)
   skin/classic/global/scale/scale-tray-horiz.gif                     (scale/scale-tray-horiz.gif)
   skin/classic/global/scale/scale-tray-vert.gif                      (scale/scale-tray-vert.gif)
   skin/classic/global/splitter/dimple.png                            (splitter/dimple.png)
   skin/classic/global/splitter/grip-bottom.gif                       (splitter/grip-bottom.gif)
   skin/classic/global/splitter/grip-top.gif                          (splitter/grip-top.gif)
   skin/classic/global/splitter/grip-left.gif                         (splitter/grip-left.gif)
deleted file mode 100644
index 98c89d66e628dcf852fbe1774363c0efff8876ff..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/in-content/check.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 21 21" enable-background="new 0 0 21 21" xml:space="preserve">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: #2292d0;
+    }
+    use[id$="-native"] {
+      fill: -moz-dialogText;
+    }
+  </style>
+  <defs style="display: none;">
+    <path id="check-shape" d="M 9.39,16.5 16.28,6 14.77,4.5 9.37,12.7 6.28,9.2 4.7,10.7 z"/>
+  </defs>
+  <use id="check" xlink:href="#check-shape"/>
+  <use id="check-native" xlink:href="#check-shape"/>
+</svg>
deleted file mode 100644
index 3d97c886af7e2137f490f8a2588d402b725da51a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -392,49 +392,40 @@ xul|checkbox {
 xul|*.checkbox-check {
   -moz-appearance: none;
   width: 23px;
   height: 23px;
   border-radius: 2px;
   border: 1px solid #c1c1c1;
   -moz-margin-end: 10px;
   background-color: #f1f1f1;
-  background-image: linear-gradient(#fff, rgba(255,255,255,0.8));
+  /* !important needed to override toolkit checked !important rule */
+  background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
   background-position: center center;
   background-repeat: no-repeat;
   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 }
 
 xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check {
   border-color: #0095dd;
 }
 
 xul|*.checkbox-check[checked] {
-  background-image: url("chrome://global/skin/in-content/check.png"),
-                    /* !important needed to override toolkit !important rule */
-                    linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
+  list-style-image: url("chrome://global/skin/in-content/check.svg#check");
 }
 
 xul|checkbox[disabled="true"] > xul|*.checkbox-check {
   opacity: 0.5;
 }
 
 xul|*.checkbox-label-box {
   -moz-margin-start: -1px; /* negative margin for the transparent border */
   -moz-padding-start: 0;
 }
 
-@media (min-resolution: 2dppx) {
-  xul|*.checkbox-check[checked] {
-    background-size: 12px 12px, auto;
-    background-image: url("chrome://global/skin/in-content/check@2x.png"),
-                      linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
-  }
-}
-
 xul|richlistitem > xul|*.checkbox-check {
   margin: 3px 6px;
 }
 
 xul|*.radio-check {
   -moz-appearance: none;
   width: 23px;
   height: 23px;
@@ -446,20 +437,17 @@ xul|*.radio-check {
   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 }
 
 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
   border-color: #0095dd;
 }
 
 xul|*.radio-check[selected] {
-  background-image: radial-gradient(circle, rgb(23,146,229),
-                    rgb(76,177,255) 5.5px, rgba(76,177,255,0.2) 6px,
-                    transparent 6px),
-                    linear-gradient(rgb(255,255,255), rgba(255,255,255,0.8));
+  list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
 }
 
 xul|radio[disabled="true"] > xul|*.radio-check {
   opacity: 0.5;
 }
 
 xul|*.radio-label-box {
   -moz-margin-start: -1px; /* negative margin for the transparent border */
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/in-content/radio.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 21 21" enable-background="new 0 0 21 21" xml:space="preserve">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: #2292d0;
+    }
+    use[id$="-native"] {
+      fill: -moz-dialogText;
+    }
+  </style>
+  <defs style="display: none;">
+    <circle id="radio-shape" cx="10.5" cy="10.5" r="6"/>
+  </defs>
+  <use id="radio" xlink:href="#radio-shape"/>
+  <use id="radio-native" xlink:href="#radio-shape"/>
+</svg>
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -18,22 +18,44 @@ xul|menulist:not([editable="true"]) > xu
   margin-top: 1px;
   margin-bottom: 1px;
 }
 
 xul|checkbox {
   -moz-padding-start: 0;
 }
 
+@media not all and (-moz-windows-default-theme) {
+  xul|*.checkbox-check {
+    background-image: none !important;
+  }
+
+  xul|*.checkbox-check[checked] {
+    list-style-image: url("chrome://global/skin/in-content/check.svg#check-native");
+    background-color: -moz-dialog;
+  }
+}
+
 xul|radio {
   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
   -moz-margin-start: 0;
   -moz-padding-start: 0;
 }
 
+@media not all and (-moz-windows-default-theme) {
+  xul|*.radio-check {
+    background-image: none;
+  }
+
+  xul|*.radio-check[selected] {
+    list-style-image: url("chrome://global/skin/in-content/radio.svg#radio-native");
+    background-color: -moz-dialog;
+  }
+}
+
 xul|*.radio-icon,
 xul|*.checkbox-icon {
   -moz-margin-end: 0;
 }
 
 html|a:-moz-focusring,
 xul|*.text-link:-moz-focusring,
 xul|*.inline-link:-moz-focusring {
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -166,20 +166,20 @@ toolkit.jar:
         skin/classic/global/media/stalled.png                    (media/stalled.png)
         skin/classic/global/media/volume-empty.png               (media/volume-empty.png)
         skin/classic/global/media/volume-full.png                (media/volume-full.png)
         skin/classic/global/media/error.png                      (media/error.png)
         skin/classic/global/media/clicktoplay-bgtexture.png      (media/clicktoplay-bgtexture.png)
         skin/classic/global/media/videoClickToPlayButton.svg     (media/videoClickToPlayButton.svg)
         skin/classic/global/menu/shared-menu-check.png           (../../shared/menu-check.png)
 *       skin/classic/global/in-content/common.css                (in-content/common.css)
-        skin/classic/global/in-content/check.png                 (../../shared/in-content/check.png)
-        skin/classic/global/in-content/check@2x.png              (../../shared/in-content/check@2x.png)
+        skin/classic/global/in-content/check.svg                 (../../shared/in-content/check.svg)
         skin/classic/global/in-content/dropdown.svg              (../../shared/in-content/dropdown.svg)
         skin/classic/global/in-content/help-glyph.svg            (../../shared/in-content/help-glyph.svg)
+        skin/classic/global/in-content/radio.svg                 (../../shared/in-content/radio.svg)
         skin/classic/global/in-content/sorter.png                (../../shared/in-content/sorter.png)
         skin/classic/global/in-content/sorter@2x.png             (../../shared/in-content/sorter@2x.png)
         skin/classic/global/printpreview/arrow-left.png          (printpreview/arrow-left.png)
         skin/classic/global/printpreview/arrow-left-end.png      (printpreview/arrow-left-end.png)
         skin/classic/global/printpreview/arrow-right.png         (printpreview/arrow-right.png)
         skin/classic/global/printpreview/arrow-right-end.png     (printpreview/arrow-right-end.png)
         skin/classic/global/radio/radio-check.gif                (radio/radio-check.gif)
         skin/classic/global/radio/radio-check-dis.gif            (radio/radio-check-dis.gif)
@@ -358,20 +358,20 @@ toolkit.jar:
         skin/classic/aero/global/media/stalled.png                       (media/stalled.png)
         skin/classic/aero/global/media/volume-empty.png                  (media/volume-empty.png)
         skin/classic/aero/global/media/volume-full.png                   (media/volume-full.png)
         skin/classic/aero/global/media/error.png                         (media/error.png)
         skin/classic/aero/global/media/clicktoplay-bgtexture.png         (media/clicktoplay-bgtexture.png)
         skin/classic/aero/global/media/videoClickToPlayButton.svg        (media/videoClickToPlayButton.svg)
         skin/classic/aero/global/menu/shared-menu-check.png              (../../shared/menu-check.png)
 *       skin/classic/aero/global/in-content/common.css                   (in-content/common.css)
-        skin/classic/aero/global/in-content/check.png                    (../../shared/in-content/check.png)
-        skin/classic/aero/global/in-content/check@2x.png                 (../../shared/in-content/check@2x.png)
+        skin/classic/aero/global/in-content/check.svg                    (../../shared/in-content/check.svg)
         skin/classic/aero/global/in-content/dropdown.svg                 (../../shared/in-content/dropdown.svg)
         skin/classic/aero/global/in-content/help-glyph.svg               (../../shared/in-content/help-glyph.svg)
+        skin/classic/aero/global/in-content/radio.svg                    (../../shared/in-content/radio.svg)
         skin/classic/aero/global/in-content/sorter.png                   (../../shared/in-content/sorter.png)
         skin/classic/aero/global/in-content/sorter@2x.png                (../../shared/in-content/sorter@2x.png)
         skin/classic/aero/global/printpreview/arrow-left.png             (printpreview/arrow-left-aero.png)
         skin/classic/aero/global/printpreview/arrow-left-end.png         (printpreview/arrow-left-end-aero.png)
         skin/classic/aero/global/printpreview/arrow-right.png            (printpreview/arrow-right-aero.png)
         skin/classic/aero/global/printpreview/arrow-right-end.png        (printpreview/arrow-right-end-aero.png)
         skin/classic/aero/global/radio/radio-check.gif                   (radio/radio-check.gif)
         skin/classic/aero/global/radio/radio-check-dis.gif               (radio/radio-check-dis.gif)