issue 3741 - Add "remove" option to list items in new options page

skin/new-options.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
@@ skipping 351 matching lines @@
   padding: 12px 16px;
   border-radius: 3px;
 }
 
 .table.list,
 #custom-wrapper
 {
   border-bottom: 1px solid #CDCDCD;
 }
 
-.table.list li .display
+.table.list li .display,
+.fill
 {
   flex: 1;
   line-height: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .table:not(.list):not(.cols) li
 {
@@ skipping 21 matching lines @@
 
 button[disabled="true"]
 {
   border-radius: 2px;
   background-color: #ccc;
 }
 
 .table button.delete
 {
   background-color: transparent;
-  background-position: -50px -52px;
+  background-position: -50px -51px;
   border: 0px;
   height: 10px;

[Thomas Greiner, 2016/05/23 12:43:26]

These dimensions are being overridden by a rule below which causes the "x"
buttons to be 8x8 instead of 10x10 which is more accurate to how they're shown
in the design mockup.

Note that the icons in the sprite need to be adapted too.

[saroyanm, 2016/06/08 15:21:07]

Done.

   padding: 0px;
   cursor: pointer;
   width: 10px;
 }
 
 .table button.delete:hover
 {
-  background-position: -59px -52px;
+  background-position: -61px -51px;
 }
 
 .tabs.horizontal
 {
   display: flex;
   margin-top: 0px;
   margin-bottom: 0px;
   padding: 0px;
   border-bottom: 1px solid #CDCDCD;
 }
@@ skipping 58 matching lines @@
 {
   background-position: -1px -62px;
 }
 
 .icon-cancel
 {
   background-position: -12px -62px;
 }
 
 .icon-enter,
-#custom-filters-add button::after,
-.table button.delete
+#custom-filters-add button::after
 {
   height: 8px;
   width: 8px;
   cursor: pointer;
 }
 
 #dialog-close::before,
 .date::before,
 .time::before
 {
@@ skipping 422 matching lines @@
   position: absolute;
   -webkit-transition: opacity 200ms ease-in-out 400ms,
     visibility 0ms linear 400ms;
   transition: opacity 200ms ease-in-out 400ms,
     visibility 0ms linear 400ms;
   visibility: visible;
   width: 400px;
   z-index: 1;
 }
 
-html[dir="ltr"] div[role="tooltip"].flip-vertical,
-html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)
+html[dir="ltr"] div[role="tooltip"].flip-horizontal,
+html[dir="rtl"] div[role="tooltip"]:not(.flip-horizontal)
 {
   left: inherit;
   right: -20px;
 }
 
 .tooltip:not(:hover) > div[role="tooltip"],
 div[role="tooltip"]:hover
 {
   visibility: hidden;
   opacity: 0;
@@ skipping 96 matching lines @@
 .context-menu .source::before
 {
   background-position: -53px -34px;
 }
 
 .context-menu .delete::before
 {
   background-position: -71px -34px;
 }
 
-html[dir="ltr"] div[role="tooltip"].flip-vertical::before,
-html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before
+html[dir="ltr"] div[role="tooltip"].flip-horizontal::before,
+html[dir="rtl"] div[role="tooltip"]:not(.flip-horizontal)::before
 {
   left: inherit;
   right: 30px;
 }
 
 div[role="tooltip"] img
 {
   float: left;
   height: 64px;
   margin-top: -2px;
@@ skipping 242 matching lines @@
 #other-language .button-add::before
 {
   display: none;
 }
 
 #other-language .display
 {
   -webkit-margin-start: 10px;
   -moz-margin-start: 10px;
 }