Issue 4142 - Update ABP icon in FF toolbar to support for high resolution screens

chrome/skin/overlay.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 #abp-status
 {
   cursor: pointer;
 }
 
 toolbar[iconsize="small"] #abp-toolbarbutton,
 #PersonalToolbar #abp-toolbarbutton,
 #header-view-toolbar > #abp-toolbarbutton,
-#abp-status {
+#abp-status
+{
   list-style-image: url("abp-status-16.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
+
 toolbar[iconsize="small"] #abp-toolbarbutton[abpstate="disabled"],
 #PersonalToolbar #abp-toolbarbutton[abpstate="disabled"],
 #header-view-toolbar > #abp-toolbarbutton[abpstate="disabled"],
 #abp-status[abpstate="disabled"],
 toolbar[iconsize="small"] #abp-toolbarbutton[abpstate="whitelisted"],
 #PersonalToolbar #abp-toolbarbutton[abpstate="whitelisted"],
 #header-view-toolbar > #abp-toolbarbutton[abpstate="whitelisted"],
-#abp-status[abpstate="whitelisted"] {
+#abp-status[abpstate="whitelisted"]
+{
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
 
+@media screen and (min-resolution: 1.5dppx)
+{
+  toolbar[iconsize="small"] #abp-toolbarbutton,
+  #PersonalToolbar #abp-toolbarbutton,
+  #header-view-toolbar > #abp-toolbarbutton,
+  #abp-status
+  {
+    list-style-image: url("abp-status.png");
+    -moz-image-region: rect(0px, 24px, 24px, 0px);
+  }
+
+  toolbar[iconsize="small"] #abp-toolbarbutton[abpstate="disabled"],
+  #PersonalToolbar #abp-toolbarbutton[abpstate="disabled"],
+  #header-view-toolbar > #abp-toolbarbutton[abpstate="disabled"],
+  #abp-status[abpstate="disabled"],
+  toolbar[iconsize="small"] #abp-toolbarbutton[abpstate="whitelisted"],
+  #PersonalToolbar #abp-toolbarbutton[abpstate="whitelisted"],
+  #header-view-toolbar > #abp-toolbarbutton[abpstate="whitelisted"],
+  #abp-status[abpstate="whitelisted"]
+  {
+    -moz-image-region: rect(24px, 24px, 48px, 0px);
+  }
+}
+
+@media screen and (min-resolution: 2dppx)
+{
+  toolbar[iconsize="small"] #abp-toolbarbutton,
+  #PersonalToolbar #abp-toolbarbutton,
+  #header-view-toolbar > #abp-toolbarbutton,
+  #abp-status
+  {
+    list-style-image: url("abp-status-32.png");
+    -moz-image-region: rect(0px, 32px, 32px, 0px);
+  }
+
+  toolbar[iconsize="small"] #abp-toolbarbutton[abpstate="disabled"],
+  #PersonalToolbar #abp-toolbarbutton[abpstate="disabled"],
+  #header-view-toolbar > #abp-toolbarbutton[abpstate="disabled"],
+  #abp-status[abpstate="disabled"],
+  toolbar[iconsize="small"] #abp-toolbarbutton[abpstate="whitelisted"],
+  #PersonalToolbar #abp-toolbarbutton[abpstate="whitelisted"],
+  #header-view-toolbar > #abp-toolbarbutton[abpstate="whitelisted"],
+  #abp-status[abpstate="whitelisted"]
+  {
+    -moz-image-region: rect(32px, 32px, 64px, 0px);
+  }
+}
+
 #abp-toolbarbutton[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #abp-toolbarbutton
 {
   list-style-image: url("abp-status-32.png");
   -moz-image-region: rect(0px, 32px, 32px, 0px);
 }
 
 #abp-toolbarbutton[cui-areatype="menu-panel"][abpstate="disabled"],
 toolbarpaletteitem[place="palette"] > #abp-toolbarbutton[abpstate="disabled"],
 #abp-toolbarbutton[cui-areatype="menu-panel"][abpstate="whitelisted"],
 toolbarpaletteitem[place="palette"] > #abp-toolbarbutton[abpstate="whitelisted"]
 {
   -moz-image-region: rect(32px, 32px, 64px, 0px);
 }
 
 #abp-toolbar-popup {
   list-style-image: none;
   -moz-image-region: rect(0px, 0px, 0px, 0px);
 }
 
 toolbox[vertical="true"] toolbar #abp-toolbarbutton dropmarker {
   display: none !important;
 }
 
 menuitem[default="true"] {
   font-weight: bold;
 }
 
 #abp-toolbarbutton,

[saroyanm, 2016/06/10 10:21:58]

Are this rules and one below still being used by any of our products ?
Feels like this only for old versions for FF according to this ->
https://blog.mozilla.org/addons/2011/02/16/toolbar-buttons-firefox-4-revisited/

But if we will delete this we will also need to update other selectors for
toolbar icon above. 

Anyway If you will consider this change irrelevant to the review I'm fine with
that, that can be tackled separately I assume.

[Wladimir Palant, 2016/06/10 14:53:27]

You are right, Firefox no longer uses 24x24 icons - however, SeaMonkey still
does. By default, we are in the Bookmarks Toolbar there, but the user has the
option to move our icon to the Navigation Toolbar. And it is a classic toolbar
with 24x24 icons.

[saroyanm, 2016/06/10 16:58:19]

Acknowledged.

 #abp-site-info {
   list-style-image: url("abp-status.png");
   -moz-image-region: rect(0px, 24px, 24px, 0px);
 }
 #abp-toolbarbutton[abpstate="disabled"],
 #abp-toolbarbutton[abpstate="whitelisted"],
 #abp-site-info[abpaction="enable"],
 #abp-site-info[abpaction="enable_site"] {
   -moz-image-region: rect(24px, 24px, 48px, 0px);
 }
@@ skipping 151 matching lines @@
 #abp-notification.abp-closing #abp-notification-content,
 #abp-notification:not(.abp-closing) #abp-notification-close-content
 {
   display: none;
 }
 
 #abp-notification-close-content toolbarbutton label
 {
   text-align: left;
 }