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
+ * 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/>.
+ */
+
+body
+{
+  margin: 0px;
+  font-family: Segoe UI, Arial, sans-serif;
+  font-size: 13px;
+  color: #545454;
+  background-color: #f8f6f2;
+  background-image: url(background.png);
+}
+
+#clickhide-instructions,
+#clickhide-cancel,
+body.clickhide-active li
+{
+  display: none;
+}
+
+body.clickhide-active #clickhide-instructions,
+body.clickhide-active #clickhide-cancel
+{
+  display: block;
+}
+
+body.local #clickhide
+{
+  display: none;
+}
+
+header
+{
+  height: 45px;
+  margin-bottom: 40px;
+  border-bottom: 1px solid #e1ddd8;
+  background-image: url(background-main.png);
+}
+
+#logo
+{
+  position: relative;
+  top: 20px;
+  width: 55px;
+  height: 55px;
+  margin: 0px auto;
+  background-image: url(abp-icon-big.png);
+  background-size: 100%;
+}
+
+#wrapper
+{
+  padding: 0px 20px;
+}
+
+footer
+{
+  min-width: 150px;
+  cursor: pointer;
+  padding: 10px 35px;
+  border-top: 1px solid #e1ddd8;
+  background-image: url(background-main.png);
+}
+
+footer:hover
+{
+  background: linear-gradient(to bottom, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),
+    url(background-main.png);
+}
+
+footer .icon
+{
+  background-position: -50px -65px;
+}
+
+ul
+{
+  margin: 0px;
+  padding: 0px;
+}
+
+li
+{
+  cursor: pointer;
+  list-style-type: none;
+  white-space: nowrap;
+  border-top: 1px dashed #a5a4a1;
+}
+
+li span
+{
+  padding-right: 70px;
+  padding-left: 3px;
+}
+
+li .collapse span
+{
+  padding-right: 120px;
+}
+
+li ul
+{
+  margin-left: 35px;
+}
+
+li li
+{
+  cursor: default;
+  padding: 10px 15px;
+}
+
+.menu-item
+{
+  padding: 10px 0px 10px 15px;
+}
+
+.menu-item:hover
+{
+  background-color: #ece7df;
+}
+
+.checkbox-item, .checkbox-item label
+{
+  cursor: pointer;
+}
+
+.icon
+{
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  margin: 1px 15px 0 0;
+  vertical-align: top;
+  background-image: url(popup.png);
+}
+
+#clickhide .icon,
+#clickhide-cancel .icon
+{
+  background-position: -50px -33px;
+}
+
+#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!

+{
+  display: none;
+}
+
+#blockable.open .i18n_close_blockable_items
+{
+  display: inline;
+}
+
+#report-issue .icon
+{
+  background-position: -50px -81px;
+}
+
+label
+{
+  vertical-align: middle;
+}