Bug 879921 - Replace GTK close icons on Linux with our own except for on menus and dialog buttons. r=Gijs a=Sylvestre
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Thu, 27 Mar 2014 23:14:11 -0700
changeset 192415 733c9be3194f0f71ce139945d9983a5d0d9f8710
parent 192414 1f4e8bf93b141186c01454892424e9c3133ad295
child 192416 755136215267c75ff48b1974a936779a5a6fd729
push id474
push userasasaki@mozilla.com
push dateMon, 02 Jun 2014 21:01:02 +0000
treeherdermozilla-release@967f4cf1b31c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, Sylvestre
bugs879921
milestone30.0a2
Bug 879921 - Replace GTK close icons on Linux with our own except for on menus and dialog buttons. r=Gijs a=Sylvestre
browser/themes/linux/browser.css
browser/themes/linux/newtab/newTab.css
browser/themes/linux/tabview/tabview.css
toolkit/themes/linux/global/alerts/alert.css
toolkit/themes/linux/global/findBar.css
toolkit/themes/linux/global/global.css
toolkit/themes/linux/global/icons/close.svg
toolkit/themes/linux/global/jar.mn
toolkit/themes/linux/global/notification.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1553,19 +1553,19 @@ richlistitem[type~="action"][actiontype=
 
 .panel-promo-icon {
   list-style-image: url("chrome://browser/skin/sync-notification-24.png");
   -moz-margin-end: 10px;
   vertical-align: middle;
 }
 
 .panel-promo-closebutton {
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-  margin-top: 0;
-  margin-bottom: 0;
+  -moz-appearance: none;
+  height: 16px;
+  width: 16px;
 }
 
 .panel-promo-closebutton > .toolbarbutton-text {
   padding: 0;
   margin: 0;
 }
 
 /* Content area */
@@ -1650,35 +1650,56 @@ richlistitem[type~="action"][actiontype=
 
 /* In-tab close button */
 .tab-close-button > .toolbarbutton-icon {
   /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
      use evil CSS to give the impression of smaller content */
   margin: -4px;
 }
 
+/* Tabstrip close button */
+.tabs-closebutton,
 .tab-close-button {
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-  margin-top: 0;
-  margin-bottom: -1px;
-  -moz-margin-end: -4px;
+  -moz-appearance: none;
+  height: 16px;
+  width: 16px;
+}
+
+.tabs-closebutton:not([selected]):not(:hover),
+.tab-close-button:not([selected]):not(:hover) {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 64, 16, 48);
+}
+
+.tabs-closebutton:not([selected]):not(:hover):-moz-lwtheme-brighttext,
+.tab-close-button:not([selected]):not(:hover):-moz-lwtheme-brighttext {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
+}
+
+.tabs-closebutton:not([selected]):not(:hover):-moz-lwtheme-darktext,
+.tab-close-button:not([selected]):not(:hover):-moz-lwtheme-darktext {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 96, 16, 80);
 }
 
 /* Tabstrip new tab button */
 .tabs-newtab-button,
 #TabsToolbar > #new-tab-button ,
 #TabsToolbar > #wrapper-new-tab-button > #new-tab-button {
   list-style-image: url("moz-icon://stock/gtk-add?size=menu");
   -moz-image-region: auto;
 }
 
-/* Tabstrip close button */
-.tabs-closebutton,
 .customization-tipPanel-closeBox > .close-icon {
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+}
+
+/* The :hover:active style from toolkit doesn't seem to work in this panel so just use :active. */
+.customization-tipPanel-closeBox > .close-icon:active {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
 }
 
 .tabs-closebutton > .toolbarbutton-icon {
   /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
      use evil CSS to give the impression of smaller content */
   margin: -2px;
 }
 
--- a/browser/themes/linux/newtab/newTab.css
+++ b/browser/themes/linux/newtab/newTab.css
@@ -44,23 +44,21 @@
   text-decoration: underline;
 }
 
 .newtab-undo-button:-moz-focusring {
   outline: 1px dotted;
 }
 
 #newtab-undo-close-button {
+  -moz-appearance: none;
   padding: 0;
   border: none;
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-}
-
-#newtab-undo-close-button > .toolbarbutton-icon {
-  margin: -4px;
+  height: 16px;
+  width: 16px;
 }
 
 #newtab-undo-close-button > .toolbarbutton-text {
   display: none;
 }
 
 #newtab-undo-close-button:-moz-focusring {
   outline: 1px dotted;
--- a/browser/themes/linux/tabview/tabview.css
+++ b/browser/themes/linux/tabview/tabview.css
@@ -86,17 +86,27 @@ html[dir=rtl] .favicon {
 }
 
 .close {
   top: 6px;
   right: 6px;
   width: 16px;
   height: 16px;
   opacity: 0.2;
-  background: url("moz-icon://stock/gtk-close?size=menu") no-repeat;
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.close:hover {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16);
+}
+
+.close:hover:active {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
 }
 
 html[dir=rtl] .close {
   right: auto;
   left: 6px;
 }
 
 .close:hover,
--- a/toolkit/themes/linux/global/alerts/alert.css
+++ b/toolkit/themes/linux/global/alerts/alert.css
@@ -57,18 +57,17 @@ label {
   text-decoration: underline;
 }
 
 .alertText[clickable="true"]:hover:active {
   color: -moz-activehyperlinktext;
 }
 
 .alertCloseButton {
-  list-style-image: url("moz-icon://stock/gtk-close?size=button");
-}
-
-.alertCloseButton > .toolbarbutton-icon {
-  margin: -4px;
+  -moz-appearance: none;
+  height: 16px;
+  padding: 4px 2px;
+  width: 16px;
 }
 
 .alertCloseButton > .toolbarbutton-text {
   display: none;
 }
--- a/toolkit/themes/linux/global/findBar.css
+++ b/toolkit/themes/linux/global/findBar.css
@@ -24,18 +24,20 @@ findbar[hidden] {
 
 .findbar-container {
   -moz-padding-start: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
 .findbar-closebutton {
-  -moz-margin-start: 4px;
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  margin: 0 8px;
 }
 
 /* Search field */
 
 .findbar-textbox {
   -moz-appearance: none;
   border: 1px solid ThreeDShadow;
   box-shadow: 0 0 1px 0 ThreeDShadow inset;
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -301,8 +301,24 @@ notification > button {
 
 .autoscroller[scrolldir="NS"] {
   background-position: right center;
 }
 
 .autoscroller[scrolldir="EW"] {
   background-position: right bottom;
 }
+
+/* :::::: Close button icons ::::: */
+
+.close-icon {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.close-icon:hover {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16);
+}
+
+.close-icon:hover:active {
+  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
+}
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/linux/global/icons/close.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg version="1.1"
+     id="icon-close"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0px"
+     y="0px"
+     width="96px"
+     height="16px"
+     viewBox="0 0 96 16">
+
+  <defs>
+    <style type="text/css"><![CDATA[
+      /* X Glyph Styles */
+
+      .glyphShape-style-foreground {
+        fill: ButtonText;
+        fill-opacity: .8;
+      }
+
+      .glyphShape-style-background {
+        fill: -moz-MenuBarText;
+        fill-opacity: .8;
+      }
+
+      .glyphShape-style-hover {
+        fill: #fff;
+      }
+
+      .glyphShape-style-hover-shadow {
+        fill: #b32c12;
+      }
+
+      .glyphShape-style-hover-active {
+        fill: #fff;
+        fill-opacity: .8;
+      }
+
+      .glyphShape-style-hover-active-shadow {
+        fill: #99260f;
+      }
+
+      .glyphShape-style-LWT-bright {
+        fill: #fff;
+        fill-opacity: .8;
+      }
+
+      .glyphShape-style-LWT-dark {
+        fill: #000;
+        fill-opacity: .8;
+      }
+
+
+      /* Close Button Background Styles */
+
+      .icon-background-hover {
+        fill: #d93616;
+      }
+
+      .icon-background-hover-active {
+        fill: #b32c12;
+      }
+      ]]></style>
+
+    <polygon id="glyphShape-close" points="4,5.5 5.5,4 8,6.5 10.5,4 12,5.5 9.5,8 12,10.5 10.5,12 8,9.5 5.5,12 4,10.5 6.5,8"/>
+    <polygon id="glyphShape-close-topHighlight" points="4,5.5 5.5,4 8,6.5 10.5,4 12,5.5 9.5,8 11.5,6 10.5,5 8,7.5 5.5,5 4.5,6"/>
+    <rect    id="glyphShape-background" x="2" y="2" rx="2" width="12" height="12"/>
+
+  </defs>
+
+  <g id="icon-closeForeground-default">
+    <use xlink:href="#glyphShape-close" class="glyphShape-style-foreground" />
+    <use xlink:href="#glyphShape-close-topHighlight" class="glyphShape-style-foreground" />
+  </g>
+
+  <g id="icon-close-hover" transform="translate(16)">
+    <use xlink:href="#glyphShape-background" class="icon-background-hover" />
+    <use xlink:href="#glyphShape-close" class="glyphShape-style-hover-shadow" transform="translate(0,1)" />
+    <use xlink:href="#glyphShape-close" class="glyphShape-style-hover" />
+  </g>
+
+  <g id="icon-close-hover-active" transform="translate(32)">
+    <use xlink:href="#glyphShape-background" class="icon-background-hover-active" />
+    <use xlink:href="#glyphShape-close" class="glyphShape-style-hover-active-shadow" transform="translate(0,1)" />
+    <use xlink:href="#glyphShape-close" class="glyphShape-style-hover-active" />
+  </g>
+
+  <g id="icon-closeBackground-default" transform="translate(48)">
+    <use xlink:href="#glyphShape-close" class="glyphShape-style-background" />
+    <use xlink:href="#glyphShape-close-topHighlight" class="glyphShape-style-background" />
+  </g>
+
+  <g id="icon-close-LWT-bright" transform="translate(64)">
+    <use xlink:href="#glyphShape-close" class="glyphShape-style-LWT-bright" />
+    <use xlink:href="#glyphShape-close-topHighlight" class="glyphShape-style-LWT-bright" />
+  </g>
+
+  <g id="icon-close-LWT-dark" transform="translate(80)">
+    <use xlink:href="#glyphShape-close" class="glyphShape-style-LWT-dark" />
+    <use xlink:href="#glyphShape-close-topHighlight" class="glyphShape-style-LWT-dark" />
+  </g>
+
+</svg>
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -38,16 +38,17 @@ toolkit.jar:
 +  skin/classic/global/console/console.css                     (console/console.css)
 +  skin/classic/global/console/console.png                     (console/console.png)
 +  skin/classic/global/console/console-toolbar.png             (console/console-toolbar.png)
 +  skin/classic/global/dirListing/remote.png                   (dirListing/remote.png)
 +  skin/classic/global/icons/Authentication.png                (icons/Authentication.png)
 +  skin/classic/global/icons/autoscroll.png                    (icons/autoscroll.png)
 +  skin/classic/global/icons/blacklist_favicon.png             (icons/blacklist_favicon.png)
 +  skin/classic/global/icons/blacklist_large.png               (icons/blacklist_large.png)
++  skin/classic/global/icons/close.svg                         (icons/close.svg)
 +  skin/classic/global/icons/find.png                          (icons/find.png)
 +  skin/classic/global/icons/loading_16.png                    (icons/loading_16.png)
 +  skin/classic/global/icons/panelarrow-horizontal.svg         (icons/panelarrow-horizontal.svg)
 +  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)
--- a/toolkit/themes/linux/global/notification.css
+++ b/toolkit/themes/linux/global/notification.css
@@ -47,19 +47,21 @@ notification[type="critical"] {
   list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=menu");
 }
 
 .messageImage[type="critical"] {
   list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu");
 }
 
 .messageCloseButton {
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-  margin-top: 0;
-  margin-bottom: 0;
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  padding-left: 11px;
+  padding-right: 11px;
 }
 
 /* Popup notification */
 
 .popup-notification-description {
   max-width: 24em;
 }
 
@@ -69,12 +71,8 @@ notification[type="critical"] {
 
 .popup-notification-learnmore-link:not([href]) {
   display: none;
 }
 
 .popup-notification-button-container {
   margin-top: 17px;
 }
-
-.popup-notification-closeitem {
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-}