[Pkg-mozext-commits] [adblock-plus] 62/74: Issue 2356 - Implemented basic tooltip functionality
David Prévot
taffit at moszumanska.debian.org
Tue Aug 11 12:07:11 UTC 2015
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository adblock-plus.
commit 8781cb1bd9ed19c8466a90e9024c76ee00f5b7a3
Author: Thomas Greiner <thomas at adblockplus.org>
Date: Wed Jul 29 12:32:22 2015 +0200
Issue 2356 - Implemented basic tooltip functionality
---
locale/en-US/options.json | 40 ++++++++++++
options.html | 64 ++++++++++++++-----
skin/options-sprite.png | Bin 2763 -> 2855 bytes
skin/options.css | 132 ++++++++++++++++++++++++++++++++++++---
skin/tooltips/acceptable-ads.png | Bin 0 -> 569 bytes
skin/tooltips/block.png | Bin 0 -> 899 bytes
skin/tooltips/more.png | Bin 0 -> 811 bytes
skin/tooltips/whitelisted.png | Bin 0 -> 890 bytes
8 files changed, 212 insertions(+), 24 deletions(-)
diff --git a/locale/en-US/options.json b/locale/en-US/options.json
index 2f22ff6..c6c4ccb 100644
--- a/locale/en-US/options.json
+++ b/locale/en-US/options.json
@@ -47,6 +47,18 @@
"description": "Ad blocking list option name in General tab",
"message": "<strong>Adblocking</strong> for websites in..."
},
+ "options_language_title_tooltip": {
+ "description": "Top part of tooltip description for 'Adblocking' section in General tab",
+ "message": "The default filter list is based on your browser's language settings. If you live in Germany, your default filter list is German+English. However, if you live in Germany and frequently visit Italian websites, you need to subscribe to the Italian filter list. To maintain optimal performance, it is recommended to select only the language that you need."
+ },
+ "options_language_title_tooltip_notes_1": {
+ "description": "First bottom part of tooltip description for 'Adblocking' section in General tab",
+ "message": "Consider: Sometimes ads appear because your filter lists are not up to date. If this is the case, it’s recommended to manually update all your filter lists. You can do that by going to <strong>Advanced > Update all filter lists</strong>."
+ },
+ "options_language_title_tooltip_notes_2": {
+ "description": "Second bottom part of tooltip description for 'Adblocking' section in General tab",
+ "message": "If you still see ads, please report them in our Adblock Plus sub-forum under <strong>Help > Forum > Filters for Adblock Plus</strong>."
+ },
"options_language_add": {
"description": "Add other language button in General Tab",
"message": "add other website languages"
@@ -55,6 +67,10 @@
"description": "Blocking list option name in General tab",
"message": "Further blocking options"
},
+ "options_furtherBlocking_title_tooltip": {
+ "description": "Tooltip description for 'More blocking options' section in General tab",
+ "message": "By default, Adblock Plus blocks all annoying ads, including video ads, animated ads, noisy ads, flashy banners, pop-ups, pop-unders and much more. In addition to ads, Adblock Plus can also block tracking, malware, social media buttons and more to increase your safety and privacy online."
+ },
"options_popular": {
"description": "Popular label in further blocking options table",
"message": "popular"
@@ -71,6 +87,18 @@
"description": "Acceptable ads option name in General tab",
"message": "Acceptable ads"
},
+ "options_acceptableAds_title_tooltip_1": {
+ "description": "First part of tooltip description for 'Acceptable Ads' section in General tab",
+ "message": "Since many websites rely on advertising revenue, we encourage the use of noninstrusive advertising."
+ },
+ "options_acceptableAds_title_tooltip_2": {
+ "description": "Second part of tooltip description for 'Acceptable Ads' section in General tab",
+ "message": "The Acceptable Ads initiative, which supports both users and website owners, is a set of strict guidelines that identifies acceptable ads. Ads meeting these criteria are displayed to users."
+ },
+ "options_acceptableAds_title_tooltip_3": {
+ "description": "Third part of tooltip description for 'Acceptable Ads' section in General tab",
+ "message": "You can, however, disable this feature at any time and browse ad-free."
+ },
"options_acceptableAds_description": {
"description": "Acceptable ads descriptive name in General tab",
"message": "Allow some non-intrusive advertising"
@@ -79,6 +107,18 @@
"description": "Whitelisting option name in General tab",
"message": "Whitelisted websites"
},
+ "options_whitelisted_title_tooltip_1": {
+ "description": "First top part of tooltip description for 'Whitelisted domains' section in General tab",
+ "message": "You can allow a website to display ads by adding it to your whitelist."
+ },
+ "options_whitelisted_title_tooltip_2": {
+ "description": "Second top part of tooltip description for 'Whitelisted domains' section in General tab",
+ "message": "This means that Adblock Plus is completely deactivated on the whitelisted site. Ads and other annoyances, such as tracking scripts, may be activated."
+ },
+ "options_whitelisted_title_tooltip_notes": {
+ "description": "Bottom part of tooltip description for 'Whitelisted domains' section in General tab",
+ "message": "Note that this feature is different from whitelisted Acceptable Ads."
+ },
"options_button_add": {
"description": "Add button label",
"message": "add"
diff --git a/options.html b/options.html
index 0035755..251e1e9 100644
--- a/options.html
+++ b/options.html
@@ -73,12 +73,22 @@
<div id="content-general">
<div>
<h1 class="i18n_options_blocking_title"></h1>
- <div class="flex-container">
+ <div class="hbox">
<div id="blocking-languages">
- <p class="option-name">
+ <div class="option-name">
<span class="i18n_options_language_title"></span>
- <a class="i18n_options_readMore tooltip" target="_blank"></a>
- </p>
+ <div class="tooltip">
+ <span class="i18n_options_readMore"></span>
+ <div role="tooltip">
+ <img src="skin/tooltips/block.png" alt="" />
+ <p class="i18n_options_language_title_tooltip"></p>
+ <div class="notes">
+ <p class="i18n_options_language_title_tooltip_notes_1"></p>
+ <p class="i18n_options_language_title_tooltip_notes_2"></p>
+ </div>
+ </div>
+ </div>
+ </div>
<ul id="blocking-languages-table" class="table list">
<template>
<input type="checkbox" class="control" />
@@ -93,14 +103,20 @@
</div>
</div>
<div id="further-blocking">
- <p class="option-name">
+ <div class="option-name">
<strong class="i18n_options_furtherBlocking_title"></strong>
- <a class="i18n_options_readMore tooltip" target="_blank"></a>
- </p>
+ <div class="tooltip">
+ <span class="i18n_options_readMore"></span>
+ <div role="tooltip" class="flip-vertical">
+ <img src="skin/tooltips/more.png" alt="" />
+ <p class="i18n_options_furtherBlocking_title_tooltip"></p>
+ </div>
+ </div>
+ </div>
<div id="custom-wrapper">
<ul id="recommend-list-table" class="table list">
<template>
- <input type="checkbox" class=control />
+ <input type="checkbox" class="control" />
<span class="display"></span>
<span class="popular"></span>
</template>
@@ -123,12 +139,20 @@
</div>
<div>
<h1 class="i18n_options_exceptions_title"></h1>
- <div class="flex-container">
+ <div class="hbox">
<div id="acceptable-ads">
- <p class="option-name">
+ <div class="option-name">
<strong class="i18n_options_acceptableAds_title"></strong>
- <a class="i18n_options_readMore tooltip" target="_blank"></a>
- </p>
+ <div class="tooltip">
+ <span class="i18n_options_readMore"></span>
+ <div role="tooltip">
+ <img src="skin/tooltips/acceptable-ads.png" alt="" />
+ <p class="i18n_options_acceptableAds_title_tooltip_1"></p>
+ <p class="i18n_options_acceptableAds_title_tooltip_2"></p>
+ <p class="i18n_options_acceptableAds_title_tooltip_3"></p>
+ </div>
+ </div>
+ </div>
<ul id="acceptableads-table" class="table list">
<template>
<input type="checkbox" class="control" />
@@ -137,10 +161,20 @@
</ul>
</div>
<div id="whitelisting">
- <p class="option-name">
+ <div class="option-name">
<strong class="i18n_options_whitelisted_title"></strong>
- <a class="i18n_options_readMore tooltip" target="_blank"></a>
- </p>
+ <div class="tooltip">
+ <span class="i18n_options_readMore"></span>
+ <div role="tooltip" class="flip-vertical">
+ <img src="skin/tooltips/whitelisted.png" alt="" />
+ <p class="i18n_options_whitelisted_title_tooltip_1"></p>
+ <p class="i18n_options_whitelisted_title_tooltip_2"></p>
+ <div class="notes">
+ <p class="i18n_options_whitelisted_title_tooltip_notes"></p>
+ </div>
+ </div>
+ </div>
+ </div>
<ul id="whitelisting-table" class="table list">
<template>
<button class="delete control"></button>
diff --git a/skin/options-sprite.png b/skin/options-sprite.png
index 839e18d..535e418 100755
Binary files a/skin/options-sprite.png and b/skin/options-sprite.png differ
diff --git a/skin/options.css b/skin/options.css
index fd8b56c..b5b3997 100644
--- a/skin/options.css
+++ b/skin/options.css
@@ -95,12 +95,16 @@ input[type="text"], input[type="search"]
.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;
}
#nav-sidebar
@@ -134,10 +138,15 @@ input[type="text"], input[type="search"]
padding: 8px 0px 16px 0px;
}
-.flex-container
+.hbox
{
display: flex;
- flex-flow: row wrap;
+ flex-direction: row;
+}
+
+.hbox > div
+{
+ flex: 1;
}
.tabs li
@@ -253,8 +262,9 @@ html[dir="rtl"] body[data-tab="help"] #tab-help
background-color: #FFFFFF;
border: 1px solid #CDCDCD;
border-radius: 8px;
+ box-sizing: border-box;
+ min-width: 960px;
padding: 0px 60px 40px 60px;
- width: 960px;
}
#tab-content h1
@@ -307,7 +317,6 @@ div.button
margin: 0px;
padding: 0px;
position: relative;
- width: 400px;
}
.table li
@@ -546,7 +555,6 @@ div.button
#custom-wrapper
{
- width: 400px;
height: 290px;
overflow: auto;
}
@@ -747,11 +755,20 @@ div.button
width: 10px;
}
+/*
+ Tooltips
+*/
+
.tooltip, #block-element-explanation a
{
- 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;
}
@@ -770,6 +787,103 @@ div.button
-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;
+ opacity: 1;
+ padding: 20px;
+ 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)
+{
+ left: inherit;
+ right: -20px;
+}
+
+.tooltip:not(:hover) > div[role="tooltip"],
+div[role="tooltip"]:hover
+{
+ 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;
+ 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"] 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;
+ margin-top: 14px;
+ padding-top: 14px;
+}
+
+div[role="tooltip"] .notes p
+{
+ font-weight: 300;
+}
+
/*
Help tab content
*/
diff --git a/skin/tooltips/acceptable-ads.png b/skin/tooltips/acceptable-ads.png
new file mode 100644
index 0000000..6f0db66
Binary files /dev/null and b/skin/tooltips/acceptable-ads.png differ
diff --git a/skin/tooltips/block.png b/skin/tooltips/block.png
new file mode 100644
index 0000000..f73170b
Binary files /dev/null and b/skin/tooltips/block.png differ
diff --git a/skin/tooltips/more.png b/skin/tooltips/more.png
new file mode 100644
index 0000000..886f470
Binary files /dev/null and b/skin/tooltips/more.png differ
diff --git a/skin/tooltips/whitelisted.png b/skin/tooltips/whitelisted.png
new file mode 100644
index 0000000..347561a
Binary files /dev/null and b/skin/tooltips/whitelisted.png differ
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-mozext/adblock-plus.git
More information about the Pkg-mozext-commits
mailing list