issue 1435 - Port popup.html from Chrome/Safari/Opera to Firefox

chrome/skin/popup.css

 /*
  * This file is part of Adblock Plus <http://adblockplus.org/>,
  * Copyright (C) 2006-2014 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
@@ skipping 146 matching lines @@
 #clickhide-instructions
 {
   margin: 10px 15px;
 }
 
 #blockable .icon
 {
   background-position: -66px -17px;
 }
 
-#blockable .i18n_close_blockable_items,

[saroyanm, 2014/10/16 11:26:15]

What you think, can we use i18n related class names here in css file, or better
assign IDs to <span> tags ?

[Thomas Greiner, 2014/10/16 13:39:44]

Good point, let's better keep them separated. One other option besides IDs is to
use data-* attributes (e.g. <span data-action="open">, <span
data-action="close">).

[saroyanm, 2014/10/17 11:42:15]

good point.

-#blockable.open .i18n_blockable_items

[Thomas Greiner, 2014/10/16 13:39:44]

By using the :not() pseudo-class you could merge those two rules into a single
one like this:

#blockable:not(.open) .i18n_blockable_items,
#blockable.open .i18n_close_blockable_items
{
  display: none;
}

[saroyanm, 2014/10/17 11:42:15]

Should have implemented, great!

+#blockable:not(.open) [data-action="close"],
+#blockable.open [data-action="open"]
 {
   display: none;
-}
-
-#blockable.open .i18n_close_blockable_items
-{
-  display: inline;
 }
 
 #report-issue .icon
 {
   background-position: -50px -81px;
 }
 
 label
 {
   vertical-align: middle;
 }