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 87 matching lines @@
   margin-bottom: 16px;
   margin-top: 24px;
 }
 
 .option-name > :first-child
 {
   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 13 matching lines @@
   font-size: 16px;
   line-height: 1em;
 }
 
 #page-title h1
 {
   margin: 0px;
   padding: 8px 0px 16px 0px;
 }
 
-.flex-container
+.hbox
 {
   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;
+  flex-direction: row;
+}
+
+.hbox > div
+{
+  flex: 1;
 }
 
 .tabs li
 {
   cursor: pointer;
   display: flex;
 }
 
 .tabs li a
 {
@@ skipping 95 matching lines @@
 #tab-contribute .icon
 {
   background-position: -31px -18px;
 }
 
 #tab-content
 {
   background-color: #FFFFFF;
   border: 1px solid #CDCDCD;
   border-radius: 8px;
+  box-sizing: border-box;
+  min-width: 960px;
   padding: 0px 60px 40px 60px;
   width: 960px;

[saroyanm, 2015/07/29 10:12:21]

nit: It's doesn't make any sense to have specified width here, but as far as I
understand this styles will be changed anyway so feel free keep it or remove so
we will come back to it later on.

 }
 
 #tab-content h1
 {
   border-bottom: 1px solid #CDCDCD;
   margin: 0px;
   padding: 40px 0px 16px 0px;
 }
 
 #link-version
@@ skipping 474 matching lines @@
   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: dashed 1px;
   color: #3A7BA6;
   cursor: default;
   font-size: 12px;
   height: 15px;
   line-height: 19px;
   margin: 0px 4px;
   position: relative;
   text-decoration: none;
@@ skipping 14 matching lines @@
   -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;
+  left: -20px;
   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.

+  -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;
-  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!

 {
+  visibility: hidden;
   opacity: 0;
+  -webkit-transition-delay: 0ms;
   transition-delay: 0ms;
 }
 
 div[role="tooltip"]::before
 {
   background-image: url(options-sprite.png);
   background-position: -8px -42px;
   content: "";
   height: 6px;
   position: absolute;
@@ skipping 18 matching lines @@
   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)
+div[role="tooltip"] p
+{
+  font-weight: 400;
+  margin: 0px;
+}
+
+div[role="tooltip"] p:not(:first-of-type)
+{
+  margin-top: 18px;
+}
+
+div[role="tooltip"] .notes
 {
   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;
+div[role="tooltip"] .notes p
+{
+  font-weight: 300;
 }
 
 /*
   Help tab content
 */
 
 #content-help
 {
   counter-reset: section;
 }
@@ skipping 182 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;
 }