Update /global icons to use SVG

35 files changed, 163 insertions, 31 deletions

diff --git a/src/chrome/browser/browser.css b/src/chrome/browser/browser.css
index 00596f1..6b949da 100644
--- a/src/chrome/browser/browser.css
+++ b/src/chrome/browser/browser.css
@@ -1434,18 +1434,18 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
   padding: 0px;
 }
 
+.tabbrowser-tab:not(:hover):not([selected="true"]) .tab-close-button {
+  opacity: .375; /* It is much faster to leave the normal image and change the opacity here --johnGraciliano */
+}
+
 .tab-close-button:-moz-lwtheme-darktext {
-  list-style-image: url(chrome://global/skin/icons/close-bright.png);
+  filter: url("chrome://global/skin/icons/invert.svg#invert");
 }  
 
 .tab-close-button:-moz-system-metric(touch-enabled) {
   -moz-transform: scale(1.2);
 }
 
-.tab-close-button:not([selected]):not(:hover):not(:active) {
-  -moz-image-region: rect(0, 64px, 16px, 48px);
-}
-
 .tab-close-button:focus {
   outline: none !important;
 }
@@ -1615,6 +1615,10 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
   border: none;
 }
 
+.tabs-closebutton:-moz-lwtheme-darktext {
+  filter: url("chrome://global/skin/icons/invert.svg#invert");
+}
+
 .tabs-closebutton > .toolbarbutton-icon {
   -moz-margin-end: 0px !important;
   -moz-padding-end: 2px !important;
@@ -2216,6 +2220,10 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   -moz-appearance: none;
 }
 
+#addonbar-closebutton:-moz-lwtheme-darktext {
+  filter: url("chrome://global/skin/icons/invert.svg#invert");
+}
+
 .statuspanel-label {
   margin: 0;
   padding: 2px 4px;
diff --git a/src/chrome/browser/searchbar.css b/src/chrome/browser/searchbar.css
index 86a4855..008644b 100644
--- a/src/chrome/browser/searchbar.css
+++ b/src/chrome/browser/searchbar.css
@@ -60,20 +60,19 @@
 
 .search-go-button {
   padding: 1px;
-  list-style-image: url("chrome://global/skin/icons/Search-glass.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
+  list-style-image: url("chrome://global/skin/icons/Search-glass.svg");
 }
 
 .search-go-button:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
 }
 
-.search-go-button:hover {
-  -moz-image-region: rect(0px 32px 16px 16px);
+.search-go-button:not(:hover) {
+  opacity: .7;
 }
 
 .search-go-button:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
+  opacity: .8;
 }
 
 .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text {
diff --git a/src/chrome/global/findBar.css b/src/chrome/global/findBar.css
index 7c1b1ef..6bfe333 100644
--- a/src/chrome/global/findBar.css
+++ b/src/chrome/global/findBar.css
@@ -4,6 +4,10 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+.findbar-closebutton:-moz-lwtheme-brighttext {
+  filter: url("chrome://global/skin/icons/invert.svg#invert");
+}
+
 findbar {
   padding: 4px 2px;
   box-shadow: 0 1px 1px rgba(0,0,0,.1) inset;
diff --git a/src/chrome/global/global.css b/src/chrome/global/global.css
index 792d411..c092ec0 100644
--- a/src/chrome/global/global.css
+++ b/src/chrome/global/global.css
@@ -58,19 +58,19 @@ window.dialog {
 }
 
 .message-icon {
-  list-style-image: url("chrome://global/skin/icons/information-32.png");
+  list-style-image: url("chrome://global/skin/icons/information-16.svg");
 }
 
 .alert-icon {
-  list-style-image: url("chrome://global/skin/icons/Warning.png");
+  list-style-image: url("chrome://global/skin/icons/warning-16.svg");
 }
 
 .error-icon {
-  list-style-image: url("chrome://global/skin/icons/Error.png");
+  list-style-image: url("chrome://global/skin/icons/error-16.svg");
 }
 
 .question-icon {
-  list-style-image: url("chrome://global/skin/icons/Question.png");
+  list-style-image: url("chrome://global/skin/icons/question-16.svg");
 }
 
 /* ::::: iframe ::::: */
@@ -314,14 +314,13 @@ label[disabled="true"]:-moz-system-metric(windows-classic) {
 /* :::::: Close button icons ::::: */
 
 .close-icon {
-  list-style-image: url("chrome://global/skin/icons/close.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
+  list-style-image: url("chrome://global/skin/icons/close.svg#normal");
 }
 
 .close-icon:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
+  list-style-image: url("chrome://global/skin/icons/close.svg#hover");
 }
 
 .close-icon:hover:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
+  list-style-image: url("chrome://global/skin/icons/close.svg#active");
 }
diff --git a/src/chrome/global/icons/Error.png b/src/chrome/global/icons/Error.png
deleted file mode 100644
index 48317fd..0000000
--- a/src/chrome/global/icons/Error.png
+++ /dev/null
diff --git a/src/chrome/global/icons/Question.png b/src/chrome/global/icons/Question.png
deleted file mode 100644
index efd80af..0000000
--- a/src/chrome/global/icons/Question.png
+++ /dev/null
diff --git a/src/chrome/global/icons/Search-glass.svg b/src/chrome/global/icons/Search-glass.svg
new file mode 100644
index 0000000..9c9e5e4
--- /dev/null
+++ b/src/chrome/global/icons/Search-glass.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <circle cx="9" cy="7" r="4.5" stroke-width="1" stroke="#fff" fill="none"/>
+  <line x1="5.8" y1="10.2" x2="2" y2="14" stroke-width="1" stroke="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/src/chrome/global/icons/Warning.png b/src/chrome/global/icons/Warning.png
deleted file mode 100644
index 3837276..0000000
--- a/src/chrome/global/icons/Warning.png
+++ /dev/null
diff --git a/src/chrome/global/icons/blacklist_favicon.png b/src/chrome/global/icons/blacklist_favicon.png
index 4fa8151..2077166 100644
--- a/src/chrome/global/icons/blacklist_favicon.png
+++ b/src/chrome/global/icons/blacklist_favicon.png
diff --git a/src/chrome/global/icons/blacklist_favicon.svg b/src/chrome/global/icons/blacklist_favicon.svg
new file mode 100644
index 0000000..c3e0d7b
--- /dev/null
+++ b/src/chrome/global/icons/blacklist_favicon.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <rect x="0" y="0" width="16" height="16" rx="2" ry="2" stroke-width="0" fill="#b14646"/>
+  <circle cx="8" cy="8" r="5.5" stroke-width="1" stroke="#fff" fill="none"/>
+  <line x1="4.1" y1="4.1" x2="11.9" y2="11.9" stroke-width="1" stroke="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/src/chrome/global/icons/close.svg b/src/chrome/global/icons/close.svg
new file mode 100644
index 0000000..0549552
--- /dev/null
+++ b/src/chrome/global/icons/close.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16"
+     shape-rendering="geometricPrecision">
+  <style>
+    g:not([id$="-shape"]):not(:target) {
+      display: none;
+    }
+  </style>
+  <defs>
+    <g id="x-shape">
+      <line x1="5" y1="5" x2="11" y2="11" stroke-width="0.757" stroke="#fff"/>
+      <line x1="5" y1="11" x2="11" y2="5" stroke-width="0.757" stroke="#fff"/>
+    </g>
+    <g id="hover-circle-shape">
+      <circle cx="8" cy="8" r="5.62" stroke-width="1" stroke="#fff" fill="none" opacity="0.54"/>
+    </g>
+    <g id="active-circle-shape">
+      <circle cx="8" cy="8" r="3.52" stroke-width="1" stroke="#fff" fill="none" opacity="0.78125"/>
+    </g>
+  </defs>
+  <g id="normal">
+    <use xlink:href="#x-shape"/>
+  </g>
+  <g id="hover">
+    <use xlink:href="#x-shape"/>
+    <use xlink:href="#hover-circle-shape"/>
+  </g>
+  <g id="active">
+    <use xlink:href="#active-circle-shape"/>
+  </g>
+  <g id="disabled">
+    <use xlink:href="#x-shape" opacity=".375"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/chrome/global/icons/error-16.png b/src/chrome/global/icons/error-16.png
index 27a020f..e927397 100644
--- a/src/chrome/global/icons/error-16.png
+++ b/src/chrome/global/icons/error-16.png
diff --git a/src/chrome/global/icons/error-16.svg b/src/chrome/global/icons/error-16.svg
new file mode 100644
index 0000000..23daf97
--- /dev/null
+++ b/src/chrome/global/icons/error-16.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <circle cx="7.5" cy="7.5" r="7" stroke-width="1" stroke="#ffffff" fill="none"/>
+  <line x1="2.6" y1="2.6" x2="12.1" y2="12.1" stroke-width="1" stroke="#ffffff"/>
+</svg>
\ No newline at end of file
diff --git a/src/chrome/global/icons/error-24.png b/src/chrome/global/icons/error-24.png
deleted file mode 100644
index cbb97e5..0000000
--- a/src/chrome/global/icons/error-24.png
+++ /dev/null
diff --git a/src/chrome/global/icons/error-48.png b/src/chrome/global/icons/error-48.png
deleted file mode 100644
index ed30c0d..0000000
--- a/src/chrome/global/icons/error-48.png
+++ /dev/null
diff --git a/src/chrome/global/icons/error-64.png b/src/chrome/global/icons/error-64.png
deleted file mode 100644
index 184fad4..0000000
--- a/src/chrome/global/icons/error-64.png
+++ /dev/null
diff --git a/src/chrome/global/icons/information-16.png b/src/chrome/global/icons/information-16.png
index c112c9b..14a4983 100644
--- a/src/chrome/global/icons/information-16.png
+++ b/src/chrome/global/icons/information-16.png
diff --git a/src/chrome/global/icons/information-16.svg b/src/chrome/global/icons/information-16.svg
new file mode 100644
index 0000000..2404990
--- /dev/null
+++ b/src/chrome/global/icons/information-16.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <circle cx="7.5" cy="7.5" r="7" stroke-width="1" stroke="#ffffff" fill="none"/>
+  <path d="m 7.5,3   l 0,2.25   m 0,.75   l 0,6" stroke-width="1" stroke="#ffffff" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/src/chrome/global/icons/information-24.png b/src/chrome/global/icons/information-24.png
deleted file mode 100644
index da744c8..0000000
--- a/src/chrome/global/icons/information-24.png
+++ /dev/null
diff --git a/src/chrome/global/icons/information-32.png b/src/chrome/global/icons/information-32.png
deleted file mode 100644
index 1069c3e..0000000
--- a/src/chrome/global/icons/information-32.png
+++ /dev/null
diff --git a/src/chrome/global/icons/information-48.png b/src/chrome/global/icons/information-48.png
deleted file mode 100644
index 6b1d401..0000000
--- a/src/chrome/global/icons/information-48.png
+++ /dev/null
diff --git a/src/chrome/global/icons/information-64.png b/src/chrome/global/icons/information-64.png
deleted file mode 100644
index 44dd626..0000000
--- a/src/chrome/global/icons/information-64.png
+++ /dev/null
diff --git a/src/chrome/global/icons/invert.svg b/src/chrome/global/icons/invert.svg
new file mode 100644
index 0000000..95b4104
--- /dev/null
+++ b/src/chrome/global/icons/invert.svg
@@ -0,0 +1,7 @@
+<svg height='0' 
+  xmlns='http://www.w3.org/2000/svg'>
+  
+  <filter id='invert'>
+    <feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/>
+  </filter>
+</svg>
\ No newline at end of file
diff --git a/src/chrome/global/icons/question-16.png b/src/chrome/global/icons/question-16.png
index ee5982e..86902f5 100644
--- a/src/chrome/global/icons/question-16.png
+++ b/src/chrome/global/icons/question-16.png
diff --git a/src/chrome/global/icons/question-16.svg b/src/chrome/global/icons/question-16.svg
new file mode 100644
index 0000000..85ada0e
--- /dev/null
+++ b/src/chrome/global/icons/question-16.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <circle cx="7.5" cy="7.5" r="7" stroke-width="1" stroke="#ffffff" fill="none"/>
+  <path d="m 4.5,6   c 0,-2.3 1,-3.5 3,-3.5   c 1.8,0 3,1 3,2.5   c 0,2 -3,2 -3,4   l 0,1   m 0,1   l 0,1.25" stroke-width="1" stroke="#ffffff" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/src/chrome/global/icons/question-24.png b/src/chrome/global/icons/question-24.png
deleted file mode 100644
index 2d7a489..0000000
--- a/src/chrome/global/icons/question-24.png
+++ /dev/null
diff --git a/src/chrome/global/icons/question-48.png b/src/chrome/global/icons/question-48.png
deleted file mode 100644
index 2780dda..0000000
--- a/src/chrome/global/icons/question-48.png
+++ /dev/null
diff --git a/src/chrome/global/icons/question-64.png b/src/chrome/global/icons/question-64.png
deleted file mode 100644
index ef547e9..0000000
--- a/src/chrome/global/icons/question-64.png
+++ /dev/null
diff --git a/src/chrome/global/icons/warning-16.png b/src/chrome/global/icons/warning-16.png
index d02a201..eafdb81 100644
--- a/src/chrome/global/icons/warning-16.png
+++ b/src/chrome/global/icons/warning-16.png
diff --git a/src/chrome/global/icons/warning-16.svg b/src/chrome/global/icons/warning-16.svg
new file mode 100644
index 0000000..a07c1fe
--- /dev/null
+++ b/src/chrome/global/icons/warning-16.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <path d="m 0,13.5   m 2,0   c -1.4,0  -1.7,-0.52 -1,-1.73   l 5.5,-9.53   c .7,-1.21 1.3,-1.21 2,0   l 5.5,9.53   c .7,1.21 0.4,1.73 -1,1.73   l -11,0" stroke-width="1" stroke="#ffffff" fill="none"/>
+  <path d="m 7.5,4.75   l 0,5.25   m 0,.75   l 0,1.5" stroke-width="1" stroke="#ffffff" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/src/chrome/global/icons/warning-24.png b/src/chrome/global/icons/warning-24.png
deleted file mode 100644
index 8f4db3c..0000000
--- a/src/chrome/global/icons/warning-24.png
+++ /dev/null
diff --git a/src/chrome/global/icons/warning-64.png b/src/chrome/global/icons/warning-64.png
deleted file mode 100644
index b8e7d7c..0000000
--- a/src/chrome/global/icons/warning-64.png
+++ /dev/null
diff --git a/src/chrome/global/icons/warning-large.png b/src/chrome/global/icons/warning-large.png
index 629d705..307a3d9 100644
--- a/src/chrome/global/icons/warning-large.png
+++ b/src/chrome/global/icons/warning-large.png
diff --git a/src/chrome/global/notification.css b/src/chrome/global/notification.css
index cbeab1a..91d1a37 100644
--- a/src/chrome/global/notification.css
+++ b/src/chrome/global/notification.css
@@ -30,15 +30,15 @@ notification[type="critical"] {
 /* Default icons for notifications */
 
 .messageImage[type="info"] {
-  list-style-image: url("chrome://global/skin/icons/information-16.png");
+  list-style-image: url("chrome://global/skin/icons/information-16.svg");
 }
 
 .messageImage[type="warning"] {
-  list-style-image: url("chrome://global/skin/icons/warning-16.png");
+  list-style-image: url("chrome://global/skin/icons/warning-16.svg");
 }
 
 .messageImage[type="critical"] {
-  list-style-image: url("chrome://global/skin/icons/error-16.png");
+  list-style-image: url("chrome://global/skin/icons/error-16.svg");
 }
 
 .messageCloseButton {
diff --git a/src/chrome/global/textbox.css b/src/chrome/global/textbox.css
index 62acb23..2912d56 100644
--- a/src/chrome/global/textbox.css
+++ b/src/chrome/global/textbox.css
@@ -68,8 +68,7 @@ textbox.plain {
 /* ::::: search textbox ::::: */
 
 .textbox-search-icon {
-  list-style-image: url(chrome://global/skin/icons/Search-glass.png);
-  -moz-image-region: rect(0, 16px, 16px, 0);
+  list-style-image: url(chrome://global/skin/icons/Search-glass.svg);
 }
 
 .textbox-search-icon:-moz-locale-dir(rtl) {
@@ -80,23 +79,32 @@ textbox.plain {
   cursor: pointer;
 }
 
+.textbox-search-icon[searchbutton]:not([disabled]):active {
+  opacity: .8;
+}
+
+.textbox-search-icon[disabled],
+.textbox-search-icon:not([searchbutton]),
+.textbox-search-icon:not(:hover):not(:active) {
+  opacity: .7;
+}
+
+/* ::::: Search clear ::::: */
+
 .textbox-search-clear {
-  list-style-image: url(chrome://global/skin/icons/Search-close.png);
-  -moz-image-region: rect(0, 16px, 16px, 0);
+  list-style-image: url(chrome://global/skin/icons/close.svg#normal);
 }
 
 .textbox-search-clear:not([disabled]) {
   cursor: default;
 }
 
-.textbox-search-clear:not([disabled]):hover ,
-.textbox-search-icon[searchbutton]:not([disabled]):hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
+.textbox-search-clear:not([disabled]):hover {
+  list-style-image: url("chrome://global/skin/icons/close.svg#hover");
 }
 
-.textbox-search-clear:not([disabled]):hover:active ,
-.textbox-search-icon[searchbutton]:not([disabled]):hover:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
+.textbox-search-clear:not([disabled]):hover:active {
+  list-style-image: url("chrome://global/skin/icons/close.svg#active");
 }
 
 /* ::::: textboxes inside toolbarpaletteitems ::::: */