Bug 1385702 - Update and clean up close icon styling for photon. r=dao

MozReview-Commit-ID: IpM0Ampi9fE

--HG--
extra : rebase_source : cd7cda3cb86a86cb66113034ac6cb6f2a07b6882

browser/base/content/browser.xul

@@ -1227,7 +1227,7 @@
 # To ensure the button doesn't expand unnecessarily for short labels, the
 # spacer should significantly out-flex the button.
           <spacer flex="1000"/>
-          <toolbarbutton id="sidebar-close" class="tabbable" tooltiptext="&sidebarCloseButton.tooltip;" oncommand="SidebarUI.hide();"/>
+          <toolbarbutton id="sidebar-close" class="close-icon tabbable" tooltiptext="&sidebarCloseButton.tooltip;" oncommand="SidebarUI.hide();"/>
         </sidebarheader>
         <browser id="sidebar" flex="1" autoscroll="false" disablehistory="true" disablefullscreen="true"
                   style="min-width: 14em; width: 18em; max-width: 36em;" tooltip="aHTMLTooltip"/>

browser/extensions/onboarding/content/onboarding.css

@@ -68,34 +68,31 @@
 }
 
 .onboarding-close-btn {
-   position: absolute;
-   top: 15px;
-   offset-inline-end: 15px;
-   cursor: pointer;
-   width: 16px;
-   height: 16px;
-   padding: 12px;
-   border: none;
-   background: var(--onboarding-overlay-dialog-background-color);
+  position: absolute;
+  top: 15px;
+  offset-inline-end: 15px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: none;
+  padding: 0;
  }
 
 .onboarding-close-btn::before {
-  content: url(chrome://browser/skin/sidebar/close.svg);
-  display: block;
-  margin-top: -8px;
-  margin-inline-start: -8px;
+  content: url(chrome://global/skin/icons/close.svg);
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0;
 }
 
-.onboarding-close-btn:hover,
-#onboarding-notification-close-btn:hover {
-  background-color: rgba(204, 204, 204, 0.6);
+.onboarding-close-btn:hover::before {
+  fill-opacity: 0.1;
 }
 
 #onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog {
-  --onboarding-overlay-dialog-background-color: #f5f5f7;
   width: 960px;
   height: 510px;
-  background: var(--onboarding-overlay-dialog-background-color);
+  background: #f5f5f7;
   border: 1px solid rgba(9, 6, 13, 0.1); /* #09060D, 0.1 opacity */
   border-radius: 3px;
   position: relative;
@@ -495,7 +492,6 @@
 }
 
 #onboarding-notification-close-btn {
-  background: var(--onboarding-notification-bar-background-color);
   position: absolute;
   offset-block-start: 50%;
   offset-inline-end: 34px;

browser/extensions/shield-recipe-client/skin/osx/Heartbeat.css

@@ -9,16 +9,3 @@ notification.heartbeat {
   border-bottom: 1px solid #C1C1C1 !important;
   height: 40px;
 }
-
-/* In themes/osx/global/notification.css the close icon is inverted because notifications
-   on OSX are usually dark. Heartbeat is light, so override that behaviour. */
-
-notification.heartbeat[type="info"] .close-icon:not(:hover) {
-  -moz-image-region: rect(0, 16px, 16px, 0) !important;
-}
-
-@media (min-resolution: 2dppx) {
-  notification.heartbeat[type="info"] .close-icon:not(:hover) {
-    -moz-image-region: rect(0, 32px, 32px, 0) !important;
-  }
-}

browser/themes/linux/browser.css

@@ -1023,20 +1023,6 @@ html|span.ac-emphasize-text-url {
   z-index: 3;
 }
 
-/* Tab close button */
-.tab-close-button:not([selected]):not(:hover) {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 64, 16, 48);
-}
-
-.tab-close-button:not(:hover):-moz-lwtheme-brighttext,
-#TabsToolbar[brighttext] .tab-close-button:not([selected]):not(:hover) {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
-}
-
-.tab-close-button:not(:hover):-moz-lwtheme-darktext {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 96, 16, 80);
-}
-
 /* Tab bar scroll arrows */
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up > .toolbarbutton-icon,
@@ -1102,11 +1088,6 @@ toolbarbutton.chevron > .toolbarbutton-icon {
 %include ../shared/ctrlTab.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 
-notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:hover) {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
-}
-
-
 %include downloads/indicator.css
 
 .gcli-panel {
@@ -1174,11 +1155,6 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h
 }
 %endif
 
-/* 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);
-}
-
 /* End customization mode */
 
 

browser/themes/linux/compacttheme.css

@@ -15,12 +15,6 @@
   --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
 }
 
-.findbar-closebutton:-moz-lwtheme-brighttext:not(:hover),
-#sidebar-header > .close-icon:-moz-lwtheme-brighttext:not(:hover),
-.tab-close-button[selected]:not(:hover) {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
-}
-
 /* The menubar and tabs toolbar should match the devedition theme */
 #TabsToolbar,
 #toolbar-menubar {

browser/themes/osx/browser.css

@@ -1543,22 +1543,11 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 }
 
 .tab-close-button {
-  -moz-appearance: none;
   border: none !important;
   background: none;
   cursor: default;
 }
 
-#TabsToolbar[brighttext] .tab-close-button.close-icon:not([selected=true]):not(:hover) {
-  -moz-image-region: rect(0, 64px, 16px, 48px);
-}
-
-@media (min-resolution: 2dppx) {
-  #TabsToolbar[brighttext] .tab-close-button.close-icon:not([selected=true]):not(:hover) {
-    -moz-image-region: rect(0, 128px, 32px, 96px);
-  }
-}
-
 /* Bookmarks toolbar */
 #PlacesToolbarDropIndicator {
   list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);

browser/themes/shared/customizableui/customizeTip.inc.css

@@ -66,8 +66,6 @@
 }
 
 .customization-tipPanel-closeBox > .close-icon {
-  -moz-appearance: none;
-  border: 0;
   margin-inline-end: -25px;
 }
 

browser/themes/shared/incontentprefs-old/preferences.inc.css

@@ -337,13 +337,10 @@ description > html|a {
 }
 
 .close-icon {
-  background-color: transparent !important;
   border: none;
-  box-shadow: none;
-  padding: 0;
-  height: auto;
-  min-height: 16px;
+  background: none !important;
   min-width: 0;
+  min-height: auto;
 }
 
 .dialogBox > .groupbox-body {

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -370,13 +370,10 @@ groupbox {
 }
 
 .close-icon {
-  background-color: transparent !important;
   border: none;
-  box-shadow: none;
-  padding: 0;
-  height: auto;
-  min-height: 16px;
+  background: none !important;
   min-width: 0;
+  min-height: auto;
 }
 
 .dialogBox > .groupbox-body {

browser/themes/shared/jar.inc.mn

@@ -217,7 +217,6 @@
   skin/classic/browser/search-indicator-magnifying-glass.svg   (../shared/search/search-indicator-magnifying-glass.svg)
   skin/classic/browser/search-arrow-go.svg                     (../shared/search/search-arrow-go.svg)
   skin/classic/browser/gear.svg                                (../shared/search/gear.svg)
-  skin/classic/browser/sidebar/close.svg                       (../shared/sidebar/close.svg)
   skin/classic/browser/tabbrowser/connecting.png               (../shared/tabbrowser/connecting.png)
   skin/classic/browser/tabbrowser/connecting@2x.png            (../shared/tabbrowser/connecting@2x.png)
   skin/classic/browser/tabbrowser/crashed.svg                  (../shared/tabbrowser/crashed.svg)

browser/themes/shared/sidebar.inc.css

@@ -49,8 +49,7 @@
   padding-inline-end: 4px;
 }
 
-#sidebar-switcher-arrow,
-#sidebar-close > .toolbarbutton-icon {
+#sidebar-switcher-arrow {
   -moz-context-properties: fill;
   fill: currentColor;
   opacity: 0.8;
@@ -62,14 +61,6 @@
   height: 12px;
 }
 
-#sidebar-close {
-  -moz-appearance: none;
-  list-style-image: url(chrome://browser/skin/sidebar/close.svg);
-  margin: 0;
-  padding: 4px;
-  border-radius: 4px;
-}
-
 #sidebar-switcher-target {
   -moz-appearance: none;
   color: inherit;
@@ -79,8 +70,7 @@
   padding: 2px 4px;
 }
 
-#sidebar-switcher-target:hover,
-#sidebar-close:hover {
+#sidebar-switcher-target:hover {
   background: hsla(240, 5%, 5%, 0.05);
 }
 
@@ -88,7 +78,6 @@
   border-color: rgba(0, 0, 0, 0.2);
 }
 
-#sidebar-close:hover:active,
 #sidebar-switcher-target:hover:active,
 #sidebar-switcher-target.active {
   background: hsla(240, 5%, 5%, 0.1);

browser/themes/shared/sidebar/close.svg

@@ -1,6 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M9.061,8l3.47-3.47A.75.75,0,0,0,11.47,3.47L8,6.939,4.53,3.47A.75.75,0,0,0,3.47,4.53L6.939,8,3.47,11.47A.75.75,0,1,0,4.53,12.53L8,9.061l3.47,3.47A.75.75,0,0,0,12.53,11.47Z"/>
-</svg>

browser/themes/windows/browser.css

@@ -1389,21 +1389,6 @@ treechildren.searchbar-treebody::-moz-tree-row(selected) {
 
 %include ../shared/tabs.inc.css
 
-/* Invert the unhovered close tab icons on bright-text tabs */
-@media not all and (min-resolution: 1.1dppx) {
-  .tab-close-button:-moz-lwtheme-brighttext,
-  #TabsToolbar[brighttext] .tab-close-button:not([selected="true"]) {
-    list-style-image: url("chrome://global/skin/icons/close-inverted.png");
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  .tab-close-button:-moz-lwtheme-brighttext,
-  #TabsToolbar[brighttext] .tab-close-button:not([selected="true"]) {
-    list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
-  }
-}
-
 /* tabbrowser-tab focus ring */
 .tabbrowser-tab:focus > .tab-stack > .tab-content {
   outline: 1px dotted;
@@ -1691,17 +1676,6 @@ notification[value="translation"] {
 %include ../shared/ctrlTab.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 
-notification.pluginVulnerable > .notification-inner > .messageCloseButton {
-  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  notification.pluginVulnerable > .notification-inner > .messageCloseButton {
-    list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
-  }
-}
-
-
 %include downloads/indicator.css
 
 /* Error counter */

browser/themes/windows/compacttheme.css

@@ -38,34 +38,6 @@
   text-shadow: none !important;
 }
 
-.findbar-closebutton:-moz-lwtheme-brighttext,
-/* Tab styling - make sure to use an inverted icon for the selected tab
-   (brighttext only covers the unselected tabs) */
-.tab-close-button[selected=true] {
-  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .findbar-closebutton:-moz-lwtheme-brighttext,
-  .tab-close-button[selected=true] {
-    list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
-  }
-}
-
-/* Override tab close icon (to disable inversion) for better contrast with
-   light theme on Windows 7 Classic theme. */
-@media not all and (min-resolution: 1.1dppx) {
-  #TabsToolbar[brighttext] .tab-close-button:-moz-lwtheme-darktext:not([selected="true"]) {
-    list-style-image: url("chrome://global/skin/icons/close.png");
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #TabsToolbar[brighttext] .tab-close-button:-moz-lwtheme-darktext:not([selected="true"]) {
-    list-style-image: url("chrome://global/skin/icons/close@2x.png");
-  }
-}
-
 @media (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8) {
 %ifndef MOZ_PHOTON_THEME

devtools/client/themes/commandline-browser.css

@@ -64,11 +64,6 @@
   height: 16px;
 }
 
-/* The toolkit close button is low contrast in the dark theme so invert it. */
-#browser-bottombox[devtoolstheme="dark"] #developer-toolbar > .close-icon:not(:hover) > image {
-  filter: invert(1);
-}
-
 #developer-toolbar-toolbox-button {
   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);

toolkit/themes/linux/global/findBar.css

@@ -33,9 +33,6 @@ findbar[noanim] {
 }
 
 .findbar-closebutton {
-  -moz-appearance: none;
-  width: 16px;
-  height: 16px;
   margin: 0 8px;
 }
 

toolkit/themes/linux/global/global.css

@@ -305,19 +305,4 @@ popupnotificationcontent {
 
 /* :::::: Close button icons ::::: */
 
-.close-icon {
-  -moz-appearance: none;
-  height: 16px;
-  width: 16px;
-  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);
-}
+%include ../../shared/close-icon.inc.css

toolkit/themes/linux/global/icons/close.svg

@@ -1,76 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="16px" viewBox="0 0 96 16">
-  <defs>
-    <style>
-      /* 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>

toolkit/themes/linux/global/jar.mn

@@ -43,7 +43,6 @@ toolkit.jar:
    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.gif                         (icons/Close.gif)
-   skin/classic/global/icons/close.svg                         (icons/close.svg)
    skin/classic/global/icons/Minimize.gif                      (icons/Minimize.gif)
    skin/classic/global/icons/resizer.png                       (icons/resizer.png)
    skin/classic/global/icons/Restore.gif                       (icons/Restore.gif)

toolkit/themes/osx/global/findBar.css

@@ -62,12 +62,6 @@ label.findbar-find-fast:-moz-lwtheme,
   -moz-box-ordinal-group: 0;
 }
 
-@media (min-resolution: 2dppx) {
-  .findbar-closebutton > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
 .findbar-find-next,
 .findbar-find-previous,
 .findbar-highlight,

toolkit/themes/osx/global/global.css

@@ -361,36 +361,4 @@ popupnotificationcontent {
 
 /* :::::: Close button icons ::::: */
 
-.close-icon {
-  list-style-image: url("chrome://global/skin/icons/close.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-.close-icon:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
-.close-icon:hover:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
-}
-
-@media (min-resolution: 2dppx) {
-  .close-icon > .button-icon,
-  .close-icon > .button-box > .button-icon,
-  .close-icon > .toolbarbutton-icon {
-    width: 16px;
-  }
-
-  .close-icon {
-    list-style-image: url("chrome://global/skin/icons/close@2x.png");
-    -moz-image-region: rect(0, 32px, 32px, 0);
-  }
-
-  .close-icon:hover {
-    -moz-image-region: rect(0, 64px, 32px, 32px);
-  }
-
-  .close-icon:hover:active {
-    -moz-image-region: rect(0, 96px, 32px, 64px);
-  }
-}
+%include ../../shared/close-icon.inc.css

toolkit/themes/osx/global/jar.mn

@@ -79,8 +79,6 @@ toolkit.jar:
   skin/classic/global/icons/chevron-inverted.png                     (icons/chevron-inverted.png)
   skin/classic/global/icons/chevron@2x.png                           (icons/chevron@2x.png)
   skin/classic/global/icons/chevron-inverted@2x.png                  (icons/chevron-inverted@2x.png)
-  skin/classic/global/icons/close.png                                (icons/close.png)
-  skin/classic/global/icons/close@2x.png                             (icons/close@2x.png)
   skin/classic/global/icons/glyph-dropdown.png                       (icons/glyph-dropdown.png)
   skin/classic/global/icons/glyph-dropdown@2x.png                    (icons/glyph-dropdown@2x.png)
   skin/classic/global/icons/menulist-dropmarker.png                  (icons/menulist-dropmarker.png)

toolkit/themes/osx/global/notification.css

@@ -6,7 +6,7 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 notification {
-  padding: 3px 3px 4px;
+  padding: 2px 3px 3px;
   text-shadow: none;
 }
 
@@ -77,32 +77,6 @@ notificationbox[notificationside="bottom"] > notification {
   border: none;
 }
 
-/*
- Invert the close icon for @type=info since both are normally dark. It's unclear
- why !important is necessary here so remove it if it's no longer needed.
-*/
-notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
-  -moz-image-region: rect(0, 64px, 16px, 48px) !important;
-}
-
-@media (min-resolution: 2dppx) {
-  notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
-    -moz-image-region: rect(0, 128px, 32px, 96px) !important;
-  }
-}
-
-.messageCloseButton:-moz-focusring > .toolbarbutton-icon {
-  border-radius: 10000px;
-  box-shadow: 0 0 2px 1px -moz-mac-focusring,
-              0 0 0 2px -moz-mac-focusring inset;
-}
-
-@media (min-resolution: 2dppx) {
-  .messageCloseButton > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
 %include ../../shared/popupnotification.inc.css
 
 .popup-notification-button:-moz-focusring {

toolkit/themes/shared/close-icon.inc.css

@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.close-icon {
+  -moz-appearance: none;
+  -moz-context-properties: fill, fill-opacity;
+  list-style-image: url(chrome://global/skin/icons/close.svg);
+  color: inherit;
+  fill: currentColor;
+  fill-opacity: 0;
+}
+
+.close-icon:hover {
+  fill-opacity: 0.1;
+}
+
+.close-icon:hover:active {
+  fill-opacity: 0.2;
+}
+
+.close-icon > .button-icon,
+.close-icon > .button-box > .button-icon,
+.close-icon > .toolbarbutton-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+}

toolkit/themes/shared/icons/close.svg

@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M0 0h20v20H0z"/>
+  <path fill="context-fill" d="M11.06 10l3.47-3.47a.75.75 0 0 0-1.06-1.06L10 8.94 6.53 5.47a.75.75 0 1 0-1.06 1.06L8.94 10l-3.47 3.47a.75.75 0 1 0 1.06 1.06L10 11.06l3.47 3.47a.75.75 0 0 0 1.06-1.06z"/>
+</svg>

toolkit/themes/shared/jar.inc.mn

@@ -28,6 +28,7 @@ toolkit.jar:
   skin/classic/global/scale.css                            (../../shared/scale.css)
   skin/classic/global/icons/calendar-arrow-left.svg        (../../shared/icons/calendar-arrow-left.svg)
   skin/classic/global/icons/calendar-arrow-right.svg       (../../shared/icons/calendar-arrow-right.svg)
+  skin/classic/global/icons/close.svg                      (../../shared/icons/close.svg)
   skin/classic/global/icons/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
   skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)

toolkit/themes/windows/global/findBar.css

@@ -40,7 +40,6 @@ findbar[noanim] {
   padding-inline-start: 0;
   padding-inline-end: 8px;
   border: none;
-  -moz-appearance: none;
 }
 
 

toolkit/themes/windows/global/global.css

@@ -333,70 +333,4 @@ popupnotificationcontent {
 
 /* :::::: Close button icons ::::: */
 
-.close-icon {
-  list-style-image: url("chrome://global/skin/icons/close.png");
-  -moz-image-region: rect(0, 20px, 20px, 0);
-}
-
-.close-icon:hover {
-  -moz-image-region: rect(0, 40px, 20px, 20px);
-}
-
-.close-icon:hover:active {
-  -moz-image-region: rect(0, 60px, 20px, 40px);
-}
-
-.close-icon > .button-icon,
-.close-icon > .button-box > .button-icon,
-.close-icon > .toolbarbutton-icon {
-  width: 20px;
-}
-
-@media (-moz-os-version: windows-win7) {
-  .close-icon {
-    -moz-image-region: rect(0, 16px, 16px, 0);
-  }
-
-  .close-icon:hover {
-    -moz-image-region: rect(0, 32px, 16px, 16px);
-  }
-
-  .close-icon:hover:active {
-    -moz-image-region: rect(0, 48px, 16px, 32px);
-  }
-
-  .close-icon > .button-icon,
-  .close-icon > .button-box > .button-icon,
-  .close-icon > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  .close-icon {
-    list-style-image: url("chrome://global/skin/icons/close@2x.png");
-    -moz-image-region: rect(0, 40px, 40px, 0);
-  }
-
-  .close-icon:hover {
-    -moz-image-region: rect(0, 80px, 40px, 40px);
-  }
-
-  .close-icon:hover:active {
-    -moz-image-region: rect(0, 120px, 40px, 80px);
-  }
-
-  @media (-moz-os-version: windows-win7) {
-    .close-icon {
-      -moz-image-region: rect(0, 32px, 32px, 0);
-    }
-
-    .close-icon:hover {
-      -moz-image-region: rect(0, 64px, 32px, 32px);
-    }
-
-    .close-icon:hover:active {
-      -moz-image-region: rect(0, 96px, 32px, 64px);
-    }
-  }
-}
+%include ../../shared/close-icon.inc.css

toolkit/themes/windows/global/jar.mn

@@ -39,15 +39,7 @@ toolkit.jar:
   skin/classic/global/dirListing/up.png                    (dirListing/up.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.png                      (icons/close.png)
-  skin/classic/global/icons/close@2x.png                   (icons/close@2x.png)
   skin/classic/global/icons/Error.png                      (icons/Error.png)
-  skin/classic/global/icons/close-win7.png                 (icons/close-win7.png)
-  skin/classic/global/icons/close-win7@2x.png              (icons/close-win7@2x.png)
-  skin/classic/global/icons/close-inverted.png             (icons/close-inverted.png)
-  skin/classic/global/icons/close-inverted@2x.png          (icons/close-inverted@2x.png)
-  skin/classic/global/icons/close-inverted-win7.png        (icons/close-inverted-win7.png)
-  skin/classic/global/icons/close-inverted-win7@2x.png     (icons/close-inverted-win7@2x.png)
   skin/classic/global/icons/collapse.png                   (icons/collapse.png)
   skin/classic/global/icons/expand.png                     (icons/expand.png)
   skin/classic/global/icons/folder-item.png                (icons/folder-item.png)
@@ -75,10 +67,6 @@ toolkit.jar:
 #elif MOZ_SEPARATE_MANIFEST_FOR_THEME_OVERRIDES
 [extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
 #endif
-% override chrome://global/skin/icons/close.png                   chrome://global/skin/icons/close-win7.png            osversion<=6.1
-% override chrome://global/skin/icons/close@2x.png                chrome://global/skin/icons/close-win7@2x.png         osversion<=6.1
-% override chrome://global/skin/icons/close-inverted.png          chrome://global/skin/icons/close-inverted-win7.png   osversion<=6.1
-% override chrome://global/skin/icons/close-inverted@2x.png       chrome://global/skin/icons/close-inverted-win7@2x.png osversion<=6.1
 
 % override chrome://global/skin/tree/twisty.svg#clsd              chrome://global/skin/tree/twisty-preWin10.svg#clsd           osversion<=6.3
 % override chrome://global/skin/tree/twisty.svg#clsd-rtl          chrome://global/skin/tree/twisty-preWin10.svg#clsd-rtl       osversion<=6.3