Issue 2356 - Implemented tooltip functionality

skin/options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 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 77 matching lines @@
 input[type="text"], input[type="search"]
 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 .option-name
 {
   display: flex;
+  margin-bottom: 16px;
+  margin-top: 24px;
 }
 
-.option-name > *
+.option-name > :first-child
 {
-  -moz-margin-end: 6px;
-  -webkit-margin-end: 6px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -moz-margin-end: auto;

[saroyanm, 2015/07/22 18:25:38]

Why do we need "margin-end: auto;" here ?

[Thomas Greiner, 2015/07/28 14:13:07]

Done. Seems to be redundant when using `flex: 1`.

+  -webkit-margin-end: auto;
 }
 
 #nav-sidebar
 {
   min-width: 198px;
 }
 
 #nav-sidebar .fixed
 {
   top: 40px;
@@ skipping 19 matching lines @@
   margin: 0px;
   padding: 8px 0px 16px 0px;
 }
 
 .flex-container
 {
   display: flex;
   flex-flow: row wrap;
 }
 
+.flex-container > div

[saroyanm, 2015/07/22 18:25:38]

I do think this rule adding confusion, because this is something that is
specific for general tab, while the class has general name and general role.

I'd rename flex-container and had something like this:
#content-general .flex-row > div

[Thomas Greiner, 2015/07/28 14:13:07]

I'd rather avoid having implementation details such as "flex" in the class name
so I called it "row-bisect" since that's what it does.

I don't see a reason, however, to make it specific to the General tab.

[saroyanm, 2015/07/28 17:21:42]

Well it does bisect the row, but why each child div has width of 400px ?
It feels like it's specific for general tab.
(I was thinking about case when we will need to have a new tab with 4 items in
the row so we can specify style for "row-bisect" to 200px for that new tab, so
it will be a generic style.)

I think it's personal preference while we don't using this style on other tabs,
but if you have another argument about this specific style, would be nice to
take into account, otherwise it's okey as it is while it's consistent with the
implementation.

[Thomas Greiner, 2015/07/28 18:19:22]

I see your point. Hardcoding it to 400px is a bad practice anyway so I made it
more flexible now. For that I also had to correct the width of the tab content
container element which was exceeding the 960px that are specified in the style
guide.

Note that I chose the class name "hbox" based on XUL's `<hbox>` element which
behaves similarly to this (see
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/hbox).

+{
+  width: 400px;
+}
+
 .tabs li
 {
   cursor: pointer;
   display: flex;
 }
 
 .tabs li a
 {
   flex: 1;
   color: inherit;
@@ skipping 147 matching lines @@
   cursor: pointer;
   display: flex;
 }
 
 .table
 {
   list-style: none;
   margin: 0px;
   padding: 0px;
   position: relative;
-  width: 400px;
 }
 
 .table li
 {
   display: flex;
   padding: 14px 0px;
   -webkit-padding-start: 16px;
   -moz-padding-start: 16px;
 }
 
@@ skipping 218 matching lines @@
 
 #blocking-languages,
 #acceptable-ads
 {
   -moz-padding-end: 40px;
   -webkit-padding-end: 40px;
 }
 
 #custom-wrapper
 {
-  width: 400px;
   height: 290px;
   overflow: auto;
 }
 
 #custom-wrapper .table
 {
   width: 100%;
 }
 
 #whitelisting .controls
@@ skipping 180 matching lines @@
 {
   content: "";
   background-position: -28px -85px;
   cursor: pointer;
   height: 10px;
   -webkit-margin-start: 6px;
   -moz-margin-start: 6px;
   width: 10px;
 }
 
+/*
+  Tooltips
+*/
+
 .tooltip, #block-element-explanation a

[saroyanm, 2015/07/22 18:25:39]

Why don't just add class ".tooltip" to "#block-element-explanation a" element ?
Anyway it's not specified that we need tooltip there in current ticket, so it
can be handled, in following reviews.

[Thomas Greiner, 2015/07/28 14:13:07]

Yes, especially since this part of the page has not been implemented yet. This
should be tackled as part of #2802 because those `<a>` tags are part of the
translatable text. Therefore this tooltip needs to be added dynamically.

I added a note to #2802 to make sure that this case is taken into consideration.

 {
-  border-bottom: dotted 2px;
+  border-bottom: dashed 1px;
   color: #3A7BA6;
+  cursor: default;
   font-size: 12px;
+  height: 15px;
+  line-height: 19px;
+  margin: 0px 4px;
+  position: relative;
   text-decoration: none;
 }
 
 #content-advanced .tooltip
 {
   -moz-margin-start: 8px;
   -webkit-margin-start: 8px;
 }
 
 #block-element-explanation a
 {
   color: black;
   border-bottom-color: #3A7BA6;
   font-weight: 600;
   -moz-padding-start: 0px;
   -webkit-padding-start: 0px;
 }
 
+div[role="tooltip"]
+{
+  background-color: rgba(45, 45, 45, 0.95);
+  border-radius: 3px;
+  color: #FFF;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  margin-top: 14px;
+  max-width: 400px;

[saroyanm, 2015/07/22 18:25:38]

Why we use both max and min width ? 
Please use "width: 400px;"

[Thomas Greiner, 2015/07/28 14:13:07]

Done.

+  min-width: 400px;
+  opacity: 1;
+  padding: 20px;
+  position: absolute;
+  transition: opacity 200ms ease-in-out 400ms;

[saroyanm, 2015/07/22 18:25:39]

In case we will need to support safari 6.0 we will need to add "-webkit", so
what is the plan are we going to drop it ?
If no please also specify webkit prefix.

[Thomas Greiner, 2015/07/28 14:13:07]

According to MDN, `transition-delay` is still prefixed in newer versions of
Safari so we won't be able to avoid prefixes anyway.

+  z-index: 1;
+  left: -20px;
+}
+
+html[dir="ltr"] div[role="tooltip"].flip-vertical,
+html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)
+{
+  left: inherit;
+  right: -20px;
+}
+
+.tooltip:not(:hover) > div[role="tooltip"],
+div[role="tooltip"]:hover

[saroyanm, 2015/07/22 18:25:39]

On small screens some tooltips overflow this element and as result tooltips are
not shown.

[Thomas Greiner, 2015/07/28 14:13:07]

Done. Nice catch!

+{
+  opacity: 0;
+  transition-delay: 0ms;
+}
+
+div[role="tooltip"]::before
+{
+  background-image: url(options-sprite.png);
+  background-position: -8px -42px;
+  content: "";
+  height: 6px;
+  position: absolute;
+  top: -6px;
+  width: 14px;
+  left: 30px;
+}
+
+html[dir="ltr"] div[role="tooltip"].flip-vertical::before,
+html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before
+{
+  left: inherit;
+  right: 30px;
+}
+
+div[role="tooltip"] img
+{
+  float: left;
+  height: 64px;
+  margin-top: -2px;
+  margin-bottom: 10px;
+  width: 64px;
+  -moz-margin-end: 10px;
+  -webkit-margin-end: 10px;
+}
+
+html[dir="rtl"] div[role="tooltip"] img
+{
+  float: right;
+}
+
+div[role="tooltip"] > div:not(:first-of-type)
+{
+  border-top: 1px solid #717171;
+  font-size: 12px;
+  font-weight: 300;
+  margin-top: 14px;
+  padding-top: 14px;
+}
+
+div[role="tooltip"] > div > div:not(:first-child)
+{
+  margin-top: 18px;
+}
+
 /*
   Help tab content
 */
 
 #content-help
 {
   counter-reset: section;
 }
 
 #content-help h1::before
@@ skipping 180 matching lines @@
   -moz-padding-end: 10px;
   -webkit-padding-start: 0px;
   -moz-padding-start: 0px;
 }
 
 #other-language .display
 {
   -webkit-margin-start: 10px;
   -moz-margin-start: 10px;
 }