Bug 865826 - Remove the browser.tabs.closeButtons pref. r=jaws
authorDão Gottwald <dao@mozilla.com>
Fri, 25 Apr 2014 14:30:18 +0200
changeset 180665 1f5f1fe135b9c3be42866646a6fc0fe456364a12
parent 180664 e91a5803fa7a7a319a67b7ae324c590b23cb7827
child 180666 dbb1d4de276cad10a793d523fafa99838d7c8aaa
push id272
push userpvanderbeken@mozilla.com
push dateMon, 05 May 2014 16:31:18 +0000
reviewersjaws
bugs865826
milestone31.0a1
Bug 865826 - Remove the browser.tabs.closeButtons pref. r=jaws
addon-sdk/source/test/test-ui-sidebar.js
browser/app/profile/firefox.js
browser/base/content/browser.css
browser/base/content/browser.xul
browser/base/content/tabbrowser.css
browser/base/content/tabbrowser.xml
browser/components/customizableui/src/CustomizableUI.jsm
browser/components/tabview/test/browser_tabview_bug606905.js
browser/modules/BrowserUITelemetry.jsm
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/windows/browser.css
toolkit/themes/linux/global/global.css
toolkit/themes/linux/global/notification.css
--- a/addon-sdk/source/test/test-ui-sidebar.js
+++ b/addon-sdk/source/test/test-ui-sidebar.js
@@ -1206,17 +1206,17 @@ exports.testShowToOpenXToClose = functio
 
   let sidebar = Sidebar({
     id: testName,
     title: testName,
     url: url,
     onShow: function() {
       assert.ok(isChecked(menuitem), 'menuitem is checked');
 
-      let closeButton = window.document.querySelector('#sidebar-header > toolbarbutton.tabs-closebutton');
+      let closeButton = window.document.querySelector('#sidebar-header > toolbarbutton.close-icon');
       simulateCommand(closeButton);
     },
     onHide: function() {
       assert.ok(!isChecked(menuitem), 'menuitem is not checked');
 
       sidebar.destroy();
       done();
     }
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -452,23 +452,16 @@ pref("browser.tabs.loadBookmarksInBackgr
 pref("browser.tabs.tabClipWidth", 140);
 pref("browser.tabs.animate", true);
 #ifdef UNIX_BUT_NOT_MAC
 pref("browser.tabs.drawInTitlebar", false);
 #else
 pref("browser.tabs.drawInTitlebar", true);
 #endif
 
-// Where to show tab close buttons:
-// 0  on active tab only
-// 1  on all tabs until tabClipWidth is reached, then active tab only
-// 2  no close buttons at all
-// 3  at the end of the tabstrip
-pref("browser.tabs.closeButtons", 1);
-
 // When tabs opened by links in other tabs via a combination of 
 // browser.link.open_newwindow being set to 3 and target="_blank" etc are
 // closed:
 // true   return to the tab that opened this tab (its owner)
 // false  return to the adjacent tab (old default)
 pref("browser.tabs.selectOwnerOnClose", true);
 
 pref("browser.ctrlTab.previews", false);
@@ -1158,17 +1151,16 @@ pref("services.sync.prefs.sync.browser.l
 pref("services.sync.prefs.sync.browser.offline-apps.notify", true);
 pref("services.sync.prefs.sync.browser.safebrowsing.enabled", true);
 pref("services.sync.prefs.sync.browser.safebrowsing.malware.enabled", true);
 pref("services.sync.prefs.sync.browser.search.selectedEngine", true);
 pref("services.sync.prefs.sync.browser.search.update", true);
 pref("services.sync.prefs.sync.browser.sessionstore.restore_on_demand", true);
 pref("services.sync.prefs.sync.browser.startup.homepage", true);
 pref("services.sync.prefs.sync.browser.startup.page", true);
-pref("services.sync.prefs.sync.browser.tabs.closeButtons", true);
 pref("services.sync.prefs.sync.browser.tabs.loadInBackground", true);
 pref("services.sync.prefs.sync.browser.tabs.warnOnClose", true);
 pref("services.sync.prefs.sync.browser.tabs.warnOnOpen", true);
 pref("services.sync.prefs.sync.browser.urlbar.autocomplete.enabled", true);
 pref("services.sync.prefs.sync.browser.urlbar.default.behavior", true);
 pref("services.sync.prefs.sync.browser.urlbar.maxRichResults", true);
 pref("services.sync.prefs.sync.dom.disable_open_during_load", true);
 pref("services.sync.prefs.sync.dom.disable_window_flip", true);
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -484,20 +484,16 @@ toolbar[mode="full"] #bookmarks-menu-but
 menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
   display: none;
 }
 
 menuitem.spell-suggestion {
   font-weight: bold;
 }
 
-#sidebar-header > .tabs-closebutton {
-  -moz-user-focus: normal;
-}
-
 /* apply Fitts' law to the notification bar's close button */
 window[sizemode="maximized"] #content .notification-inner {
   border-right: 0px !important;
 }
 
 /* Hide extension toolbars that neglected to set the proper class */
 window[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar),
 window[chromehidden~="toolbar"] toolbar:not(.toolbar-primary):not(.chromeclass-menubar) {
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -544,17 +544,17 @@
     <toolbar id="TabsToolbar"
              class="toolbar-primary"
              fullscreentoolbar="true"
              customizable="true"
              mode="icons"
              iconsize="small"
              aria-label="&tabsToolbar.label;"
              context="toolbar-context-menu"
-             defaultset="tabbrowser-tabs,new-tab-button,alltabs-button,tabs-closebutton"
+             defaultset="tabbrowser-tabs,new-tab-button,alltabs-button"
              collapsed="true">
 
 #if defined(MOZ_WIDGET_GTK) || defined(MOZ_WIDGET_QT)
       <hbox id="private-browsing-indicator"
             skipintoolbarset="true"/>
 #endif
 
       <tabs id="tabbrowser-tabs"
@@ -595,23 +595,16 @@
                     label="&viewTabGroups.label;"
                     command="Browser:ToggleTabView"
                     cui-areatype="toolbar"
                     observes="tabviewGroupsNumber"/>
           <menuseparator id="alltabs-popup-separator"/>
         </menupopup>
       </toolbarbutton>
 
-      <toolbarbutton id="tabs-closebutton"
-                     class="close-button tabs-closebutton close-icon"
-                     command="cmd_close"
-                     label="&closeTab.label;"
-                     cui-areatype="toolbar"
-                     tooltiptext="&closeTab.label;"/>
-
 #if !defined(MOZ_WIDGET_GTK) && !defined(MOZ_WIDGET_QT)
       <hbox class="private-browsing-indicator" skipintoolbarset="true"/>
 #endif
 #ifdef CAN_DRAW_IN_TITLEBAR
       <hbox class="titlebar-placeholder" type="caption-buttons"
             id="titlebar-placeholder-on-TabsToolbar-for-captions-buttons" persist="width"
 #ifndef XP_MACOSX
             ordinal="1000"
@@ -1049,17 +1042,17 @@
 
   <deck id="content-deck" flex="1">
     <hbox flex="1" id="browser">
       <vbox id="browser-border-start" hidden="true" layer="true"/>
       <vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
         <sidebarheader id="sidebar-header" align="center">
           <label id="sidebar-title" persist="value" flex="1" crop="end" control="sidebar"/>
           <image id="sidebar-throbber"/>
-          <toolbarbutton class="tabs-closebutton close-icon" tooltiptext="&sidebarCloseButton.tooltip;" oncommand="toggleSidebar();"/>
+          <toolbarbutton class="close-icon tabbable" tooltiptext="&sidebarCloseButton.tooltip;" oncommand="toggleSidebar();"/>
         </sidebarheader>
         <browser id="sidebar" flex="1" autoscroll="false" disablehistory="true"
                   style="min-width: 14em; width: 18em; max-width: 36em;"/>
       </vbox>
 
       <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" hidden="true"/>
       <vbox id="appcontent" flex="1">
         <tabbrowser id="content"
--- a/browser/base/content/tabbrowser.css
+++ b/browser/base/content/tabbrowser.css
@@ -7,22 +7,21 @@
 }
 
 .tabbrowser-arrowscrollbox {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-arrowscrollbox");
 }
 
 .tab-close-button {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-close-tab-button");
-  display: none;
 }
 
-.tabbrowser-tabs[closebuttons="activetab"] > * > * > * > .tab-close-button:not([pinned])[selected="true"],
-.tabbrowser-tabs[closebuttons="alltabs"] > * > * > * > .tab-close-button:not([pinned]) {
-  display: -moz-box;
+.tab-close-button[pinned],
+.tabbrowser-tabs[closebuttons="activetab"] > * > * > * > .tab-close-button:not([selected="true"]) {
+  display: none;
 }
 
 .tab-label[pinned] {
   width: 0;
   margin-left: 0 !important;
   margin-right: 0 !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -3367,24 +3367,22 @@
                     style="width: 0;"/>
       </xul:arrowscrollbox>
     </content>
 
     <implementation implements="nsIDOMEventListener">
       <constructor>
         <![CDATA[
           this.mTabClipWidth = Services.prefs.getIntPref("browser.tabs.tabClipWidth");
-          this.mCloseButtons = Services.prefs.getIntPref("browser.tabs.closeButtons");
           this._closeWindowWithLastTab = Services.prefs.getBoolPref("browser.tabs.closeWindowWithLastTab");
 
           var tab = this.firstChild;
           tab.label = this.tabbrowser.mStringBundle.getString("tabs.emptyTabTitle");
           tab.setAttribute("crop", "end");
           tab.setAttribute("onerror", "this.removeAttribute('image');");
-          this.adjustTabstrip();
 
           Services.prefs.addObserver("browser.tabs.", this._prefObserver, false);
           window.addEventListener("resize", this, false);
           window.addEventListener("load", this, false);
 
           try {
             this._tabAnimationLoggingEnabled = Services.prefs.getBoolPref("browser.tabs.animationLogging.enabled");
           } catch (ex) {
@@ -3471,23 +3469,18 @@
         ]]></body>
       </method>
 
       <field name="_prefObserver"><![CDATA[({
         tabContainer: this,
 
         observe: function (subject, topic, data) {
           switch (data) {
-            case "browser.tabs.closeButtons":
-              this.tabContainer.mCloseButtons = Services.prefs.getIntPref(data);
-              this.tabContainer.adjustTabstrip();
-              break;
             case "browser.tabs.closeWindowWithLastTab":
               this.tabContainer._closeWindowWithLastTab = Services.prefs.getBoolPref(data);
-              this.tabContainer.adjustTabstrip();
               break;
           }
         }
       });]]></field>
       <field name="_blockDblClick">false</field>
 
       <field name="_tabDropIndicator">
         document.getAnonymousElementByAttribute(this, "anonid", "tab-drop-indicator");
@@ -3558,52 +3551,33 @@
             this.visible = true;
         ]]></body>
       </method>
 
       <method name="adjustTabstrip">
         <body><![CDATA[
           let numTabs = this.childNodes.length -
                         this.tabbrowser._removingTabs.length;
-          // modes for tabstrip
-          // 0 - button on active tab only
-          // 1 - close buttons on all tabs
-          // 2 - no close buttons at all
-          // 3 - close button at the end of the tabstrip
-          switch (this.mCloseButtons) {
-          case 0:
-            this.setAttribute("closebuttons", "activetab");
-            break;
-          case 1:
-            if (numTabs <= 2) {
-              // This is an optimization to avoid layout flushes by calling
-              // getBoundingClientRect() when we just opened a second tab. In
-              // this case it's highly unlikely that the tab width is smaller
-              // than mTabClipWidth and the tab close button obscures too much
-              // of the tab's label. In the edge case of the window being too
-              // narrow (or if tabClipWidth has been set to a way higher value),
-              // we'll correct the 'closebuttons' attribute after the tabopen
-              // animation has finished.
-              this.setAttribute("closebuttons", "alltabs");
-            } else {
-              let tab = this.tabbrowser.visibleTabs[this.tabbrowser._numPinnedTabs];
-              if (tab && tab.getBoundingClientRect().width > this.mTabClipWidth)
-                this.setAttribute("closebuttons", "alltabs");
-              else
-                this.setAttribute("closebuttons", "activetab");
+          if (numTabs > 2) {
+            // This is an optimization to avoid layout flushes by calling
+            // getBoundingClientRect() when we just opened a second tab. In
+            // this case it's highly unlikely that the tab width is smaller
+            // than mTabClipWidth and the tab close button obscures too much
+            // of the tab's label. In the edge case of the window being too
+            // narrow (or if tabClipWidth has been set to a way higher value),
+            // we'll correct the 'closebuttons' attribute after the tabopen
+            // animation has finished.
+
+            let tab = this.tabbrowser.visibleTabs[this.tabbrowser._numPinnedTabs];
+            if (tab && tab.getBoundingClientRect().width <= this.mTabClipWidth) {
+              this.setAttribute("closebuttons", "activetab");
+              return;
             }
-            break;
-          case 2:
-          case 3:
-            this.setAttribute("closebuttons", "never");
-            break;
           }
-          var tabstripClosebutton = document.getElementById("tabs-closebutton");
-          if (tabstripClosebutton && tabstripClosebutton.parentNode == this._container)
-            tabstripClosebutton.collapsed = this.mCloseButtons != 3;
+          this.removeAttribute("closebuttons");
         ]]></body>
       </method>
 
       <method name="_handleTabSelect">
         <parameter name="aSmoothScroll"/>
         <body><![CDATA[
           if (this.getAttribute("overflow") == "true")
             this.mTabstrip.ensureElementIsVisible(this.selectedItem, aSmoothScroll);
--- a/browser/components/customizableui/src/CustomizableUI.jsm
+++ b/browser/components/customizableui/src/CustomizableUI.jsm
@@ -219,17 +219,16 @@ let CustomizableUIInternal = {
 #endif
     this.registerArea(CustomizableUI.AREA_TABSTRIP, {
       legacy: true,
       type: CustomizableUI.TYPE_TOOLBAR,
       defaultPlacements: [
         "tabbrowser-tabs",
         "new-tab-button",
         "alltabs-button",
-        "tabs-closebutton",
       ],
       defaultCollapsed: null,
     }, true);
     this.registerArea(CustomizableUI.AREA_BOOKMARKS, {
       legacy: true,
       type: CustomizableUI.TYPE_TOOLBAR,
       defaultPlacements: [
         "personal-bookmarks",
--- a/browser/components/tabview/test/browser_tabview_bug606905.js
+++ b/browser/components/tabview/test/browser_tabview_bug606905.js
@@ -15,17 +15,17 @@ function test() {
   executeSoon(function() {
     is(gBrowser.tabContainer.getAttribute("closebuttons"), "activetab", "Only show button on selected tab.");
 
     // move a tab to another group and check the closebuttons attribute
     TabView._initFrame(function() {
       TabView.moveTabTo(newTabs[newTabs.length - 1], null);
       ok(gBrowser.visibleTabs[0].getBoundingClientRect().width > gBrowser.tabContainer.mTabClipWidth, 
          "Tab width is bigger than tab clip width");
-      is(gBrowser.tabContainer.getAttribute("closebuttons"), "alltabs", "Show button on all tabs.")
+      is(gBrowser.tabContainer.getAttribute("closebuttons"), "", "Show button on all tabs.")
 
       // clean up and finish
       newTabs.forEach(function(tab) {
         gBrowser.removeTab(tab);
       });
       finish();
     });
   });
--- a/browser/modules/BrowserUITelemetry.jsm
+++ b/browser/modules/BrowserUITelemetry.jsm
@@ -57,17 +57,16 @@ XPCOMUtils.defineLazyGetter(this, "DEFAU
     // in the document.
     "toolbar-menubar": [
       "menubar-items",
     ],
     "TabsToolbar": [
       "tabbrowser-tabs",
       "new-tab-button",
       "alltabs-button",
-      "tabs-closebutton",
     ],
     "PersonalToolbar": [
       "personal-bookmarks",
     ],
   };
 
   let showCharacterEncoding = Services.prefs.getComplexValue(
     "browser.menu.showCharacterEncoding",
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1767,71 +1767,37 @@ richlistitem[type~="action"][actiontype=
 
 /* Tab drag and drop */
 .tab-drop-indicator {
   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
   margin-bottom: -9px;
   z-index: 3;
 }
 
-/* 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 {
-  -moz-appearance: none;
-  height: 16px;
-  width: 16px;
-}
-
-.tabs-closebutton:not([selected]):not(:hover),
+/* 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);
 }
 
-.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;
 }
 
-.customization-tipPanel-closeBox > .close-icon {
-  -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;
-}
-
 /* Tabbrowser arrowscrollbox arrows */
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   -moz-appearance: none;
   margin: 0 0 @tabToolbarNavbarOverlap@;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up {
@@ -1898,21 +1864,16 @@ richlistitem[type~="action"][actiontype=
 }
 
 .alltabs-item[tabIsVisible] {
   /* box-shadow instead of background-color to work around native styling */
   box-shadow: inset -5px 0 ThreeDShadow;
 }
 
 /* Sidebar */
-#sidebar-header > .tabs-closebutton {
-  margin-bottom: 0px !important;
-  padding: 0px 2px 0px 2px !important;
-}
-
 #sidebar-throbber[loading="true"] {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
   -moz-margin-end: 4px;
 }
 
 toolbarbutton.chevron {
   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
 }
@@ -2230,16 +2191,21 @@ chatbox {
 
 #main-window[customize-entered] #TabsToolbar {
   -moz-appearance: none;
   background-clip: padding-box;
   border-right: 3px solid transparent;
   border-left: 3px solid transparent;
 }
 
+/* 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 */
 
 
 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
   background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat;
   width: 40px;
 }
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2618,20 +2618,16 @@ sidebarheader {
   font-weight: bold;
 }
 
 .sidebar-throbber[loading="true"],
 #sidebar-throbber[loading="true"] {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
 }
 
-sidebarheader > .tabs-closebutton > .toolbarbutton-text {
-  display: none;
-}
-
 /* ----- CONTENT ----- */
 
 .browserContainer > findbar {
   background: @scopeBarBackground@;
   border-top: @scopeBarSeparatorBorder@;
   color: -moz-DialogText;
   text-shadow: none;
 }
@@ -3174,28 +3170,16 @@ toolbarbutton.chevron > .toolbarbutton-m
   list-style-image: url("chrome://global/skin/icons/loading_16.png") !important;
 }
 
 .alltabs-item[tabIsVisible] {
   /* box-shadow instead of background-color to work around native styling */
   box-shadow: inset -5px 0 ThreeDShadow;
 }
 
-/* Tabstrip close button */
-.tabs-closebutton {
-  -moz-padding-end: 4px;
-  border: none;
-}
-
-@media (min-resolution: 2dppx) {
-  .tabs-closebutton > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
 /* Bookmarks toolbar */
 #PlacesToolbarDropIndicator {
   list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
 }
 
 /* Bookmark drag and drop styles */
 
 .bookmark-item[dragover-into="true"] {
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1761,16 +1761,23 @@ toolbarbutton[type="socialmark"] > .tool
 #sidebar {
   background-color: Window;
 }
 
 #sidebar-title {
   -moz-padding-start: 0px;
 }
 
+#sidebar-header > .close-icon {
+  -moz-appearance: none;
+  padding: 4px 2px;
+  margin: 0;
+  border: none;
+}
+
 .browserContainer > findbar {
   background-color: -moz-dialog;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
 /* Tabstrip */
 
@@ -1992,30 +1999,16 @@ toolbarbutton[type="socialmark"] > .tool
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
 }
 
 .alltabs-item[tabIsVisible] {
   /* box-shadow instead of background-color to work around native styling */
   box-shadow: inset -5px 0 ThreeDShadow;
 }
 
-/* Tabstrip close button */
-.tabs-closebutton {
-  -moz-appearance: none;
-  padding: 4px 2px;
-  margin: 0px;
-  border: none;
-}
-
-.tabs-closebutton > .toolbarbutton-icon {
-  -moz-margin-end: 0px !important;
-  -moz-padding-end: 2px !important;
-  -moz-padding-start: 2px !important;
-}
-
 toolbarbutton.chevron {
   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
 }
 
 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -305,16 +305,19 @@ notification > button {
 
 .autoscroller[scrolldir="EW"] {
   background-position: right bottom;
 }
 
 /* :::::: 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);
 }
--- a/toolkit/themes/linux/global/notification.css
+++ b/toolkit/themes/linux/global/notification.css
@@ -47,19 +47,16 @@ 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 {
-  -moz-appearance: none;
-  width: 16px;
-  height: 16px;
   padding-left: 11px;
   padding-right: 11px;
 }
 
 /* Popup notification */
 
 .popup-notification-description {
   max-width: 24em;