[Pkg-mozext-commits] [adblock-plus] 49/74: Issue 2357 - Added "predefined list" dialog to options page
David Prévot
taffit at moszumanska.debian.org
Tue Aug 11 12:07:10 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 4d5fcd0bf773e81376eb7aaed7eaf72b8791a253
Author: Thomas Greiner <thomas at adblockplus.org>
Date: Thu Jul 16 14:49:18 2015 +0200
Issue 2357 - Added "predefined list" dialog to options page
---
locale/en-US/options.json | 18 ++++--
options.html | 56 ++++++++++-------
options.js | 152 ++++++++++++++++++++++++----------------------
skin/options.css | 36 +++++------
4 files changed, 140 insertions(+), 122 deletions(-)
diff --git a/locale/en-US/options.json b/locale/en-US/options.json
index 8fe5b8a..2f22ff6 100644
--- a/locale/en-US/options.json
+++ b/locale/en-US/options.json
@@ -175,19 +175,27 @@
"description": "Social media section description in Help tab",
"message": "If there are major problems with Adblock Plus which affects all of our users, we tell you in our social media channels."
},
- "options_dialog_customlist_title": {
- "description": "Title of custom list modal dialog",
+ "options_dialog_predefined_confirm": {
+ "description": "Confirming to add a predefined subscription when asked in a dialog",
+ "message": "Yes, use this blocking list"
+ },
+ "options_dialog_predefined_title": {
+ "description": "Dialog title for adding a predefined subscription",
+ "message": "Do you really want to use this blocking list?"
+ },
+ "options_dialog_custom_title": {
+ "description": "Title of custom subscription modal dialog",
"message": "Add other blocking list"
},
"options_close": {
"description": "Close modal button",
"message": "close"
},
- "options_dialog_customlist_subscription_title": {
- "description": "Add customlist modal import hint message",
+ "options_dialog_custom_subscription_title": {
+ "description": "Add custom subscription modal import hint message",
"message": "Via URL/Link"
},
- "options_dialog_customlist_import": {
+ "options_dialog_custom_import": {
"description": "Button in add custom subscription modal dialog",
"message": "import blocking list with this URL"
},
diff --git a/options.html b/options.html
index 4601331..0035755 100644
--- a/options.html
+++ b/options.html
@@ -35,16 +35,16 @@
<p class="i18n_options_page_header_1"></p>
<h1 class="i18n_options_page_header_2"></h1>
</div>
- <ul id="main-navigation-tabs" class="tabs vertical">
- <li id="tab-general" data-show="general" class="active">
+ <ul class="tabs vertical">
+ <li id="tab-general" data-action="switch-tab" data-tab="general" class="active">
<a class="i18n_options_tab_general"></a>
<span class="icon"></span>
</li>
- <li id="tab-advanced" data-show="advanced">
+ <li id="tab-advanced" data-action="switch-tab" data-tab="advanced">
<a class="i18n_options_tab_advanced"></a>
<span class="icon"></span>
</li>
- <li id="tab-help" data-show="help">
+ <li id="tab-help" data-action="switch-tab" data-tab="help">
<a class="i18n_options_tab_help"></a>
<span class="icon"></span>
</li>
@@ -86,7 +86,7 @@
</template>
</ul>
<div class="controls">
- <button id="add-website-language">
+ <button data-action="open-dialog" data-dialog="language">
<span class="icon icon-add"></span>
<span class="i18n_options_language_add"></span>
</button>
@@ -113,7 +113,7 @@
</ul>
</div>
<div class="controls">
- <button id="add-blocking-list">
+ <button data-action="open-dialog" data-dialog="custom">
<span class="icon icon-add"></span>
<span class="i18n_options_furtherBlocking_add"><span>
</button>
@@ -149,16 +149,16 @@
</ul>
<div class="controls">
<div>
- <span id="whitelisting-add-icon" class="icon icon-add"></span>
+ <span class="icon icon-add" data-action="add-domain-exception"></span>
<input type="text" id="whitelisting-textbox" />
- <span id="whitelisting-enter-icon" class="icon icon-enter"></span>
+ <span class="icon icon-enter" data-action="add-domain-exception"></span>
</div>
<div>
- <button id="whitelisting-add-button" class="button-add">
+ <button id="whitelisting-add-button" class="button-add" data-action="add-domain-exception">
+<span class="i18n_options_button_add"></span>
</button>
<span></span>
- <button id="whitelisting-cancel-button" class="i18n_options_button_cancel cancel-button"></button>
+ <button class="i18n_options_button_cancel cancel-button" data-action="cancel-domain-exception"></button>
</div>
</div>
</div>
@@ -216,16 +216,16 @@
<textarea id="custom-filters-raw"></textarea>
</div>
<div id="custom-filters-edit-wrapper" class="controls">
- <button id="custom-filters-show-edit">
+ <button id="custom-filters-show-edit" data-action="edit-custom-filters">
<span class="icon icon-edit"></span>
<span class="i18n_options_customFilter_edit"></span>
</button>
<div id="custom-filters-raw-controls">
- <button>
+ <button data-action="cancel-custom-filters">
<span class="icon icon-edit"></span>
<span class="i18n_options_customFilter_list"></span>
</button>
- <button id="custom-filters-raw-save">
+ <button id="custom-filters-raw-save" data-action="save-custom-filters">
<span class="icon icon-edit"></span>
<span class="i18n_options_customFilter_save"></span>
</button>
@@ -263,13 +263,14 @@
<div id="dialog">
<header>
<span id="dialog-title">
- <span id="dialog-title-customlist" class="i18n_options_dialog_customlist_title"></span>
+ <span id="dialog-title-custom" class="i18n_options_dialog_custom_title"></span>
<span id="dialog-title-language" class="i18n_options_dialog_language_title"></span>
+ <span id="dialog-title-predefined" class="i18n_options_dialog_predefined_title"></span>
</span>
- <button id="dialog-close" class="i18n_options_close"></button>
+ <button id="dialog-close" class="i18n_options_close" data-action="close-dialog"></button>
</header>
<div id="dialog-body" class="content">
- <!-- Add other website language: Dialog -->
+ <!-- Add language subscription -->
<div id="dialog-content-language" class="dialog-content">
<div class="dialog-content-block">
<h3 class="i18n_options_dialog_language_added"></h3>
@@ -294,26 +295,37 @@
</ul>
</div>
</div>
- <!-- Add other blocking list: Dialog -->
- <div id="dialog-content-customlist" class="dialog-content">
+ <!-- Add custom subscription -->
+ <div id="dialog-content-custom" class="dialog-content">
<div class="dialog-content-block">
- <h3 class="i18n_options_dialog_customlist_subscription_title"></h3>
+ <h3 class="i18n_options_dialog_custom_subscription_title"></h3>
<div>
<input id="blockingList-textbox" type="text" placeholder="www.example.com/blockinglist.txt" />
</div>
- <div id="import-blockingList-button" class="button-wrapper">
+ <div class="button-wrapper" data-action="import-subscription">
<span class="icon icon-arrow"></span>
- <span class="i18n_options_dialog_customlist_import"></span>
+ <span class="i18n_options_dialog_custom_import"></span>
</div>
</div>
<div class="dialog-content-block">
<h3 class="i18n_options_dialog_edit_own_list"></h3>
- <div id="edit-ownBlockingList-button" class="button-wrapper">
+ <div class="button-wrapper" data-action="close-dialog,switch-tab,edit-custom-filters" data-tab="advanced">
<span class="icon icon-arrow"></span>
<span class="i18n_options_dialog_create_own_list"></span>
</div>
</div>
</div>
+ <!-- Add predefined subscription -->
+ <div id="dialog-content-predefined" class="dialog-content">
+ <div class="dialog-content-block">
+ <h3></h3>
+ <div class="url"></div>
+ <div class="button-wrapper" data-action="add-predefined-subscription">
+ <span class="icon icon-arrow"></span>
+ <span class="i18n_options_dialog_predefined_confirm"></span>
+ </div>
+ </div>
+ </div>
</div>
</div>
</body>
diff --git a/options.js b/options.js
index ded94e8..2bc8e9e 100644
--- a/options.js
+++ b/options.js
@@ -53,10 +53,10 @@
var text = item.title || item.url || item.text;
var listItem = document.createElement("li");
listItem.appendChild(document.importNode(template.content, true));
- listItem.dataset.access = item.url || item.text;
+ listItem.setAttribute("data-access", item.url || item.text);
listItem.querySelector(".display").textContent = text;
if (text)
- listItem.dataset.search = text.toLowerCase();
+ listItem.setAttribute("data-search", text.toLowerCase());
var control = listItem.querySelector(".control");
if (control)
@@ -105,7 +105,7 @@
function onToggleSubscriptionClick(e)
{
e.preventDefault();
- var subscriptionUrl = e.target.parentNode.dataset.access;
+ var subscriptionUrl = e.target.parentNode.getAttribute("data-access");
if (!e.target.checked)
{
ext.backgroundPage.sendMessage(
@@ -121,13 +121,13 @@
function onAddLanguageSubscriptionClick(e)
{
e.preventDefault();
- var url = this.parentNode.dataset.access;
+ var url = this.parentNode.getAttribute("data-access");
addEnableSubscription(url);
}
function onRemoveFilterClick()
{
- var filter = this.parentNode.dataset.access;
+ var filter = this.parentNode.getAttribute("data-access");
ext.backgroundPage.sendMessage(
{
type: "filters.remove",
@@ -331,6 +331,72 @@
request.send(null);
}
+ function onClick(e)
+ {
+ var element = e.target;
+ while (true)
+ {
+ if (!element)
+ return;
+
+ if (element.hasAttribute("data-action"))
+ break;
+
+ element = element.parentElement;
+ }
+
+ var actions = element.getAttribute("data-action").split(",");
+ for (var i = 0; i < actions.length; i++)
+ {
+ switch (actions[i])
+ {
+ case "add-domain-exception":
+ addWhitelistedDomain();
+ break;
+ case "add-predefined-subscription":
+ var dialog = E("dialog-content-predefined");
+ var title = dialog.querySelector("h3").textContent;
+ var url = dialog.querySelector(".url").textContent;
+ addEnableSubscription(url, title);
+ document.body.removeAttribute("data-dialog");
+ break;
+ case "cancel-custom-filters":
+ E("custom-filters").classList.remove("mode-edit");
+ break;
+ case "cancel-domain-exception":
+ E("whitelisting-textbox").value = "";
+ break;
+ case "close-dialog":
+ document.body.removeAttribute("data-dialog");
+ break;
+ case "edit-custom-filters":
+ E("custom-filters").classList.add("mode-edit");
+ editCustomFilters();
+ break;
+ case "import-subscription":
+ var url = E("blockingList-textbox").value;
+ addEnableSubscription(url);
+ document.body.removeAttribute("data-dialog");
+ break;
+ case "open-dialog":
+ openDialog(element.getAttribute("data-dialog"));
+ break;
+ case "save-custom-filters":
+ ext.backgroundPage.sendMessage(
+ {
+ type: "filters.importRaw",
+ text: E("custom-filters-raw").value
+ });
+ E("custom-filters").classList.remove("mode-edit");
+ break;
+ case "switch-tab":
+ document.body.setAttribute("data-tab",
+ element.getAttribute("data-tab"));
+ break;
+ }
+ }
+ }
+
function onDOMLoaded()
{
var recommendationTemplate = document.querySelector("#recommend-list-table template");
@@ -342,15 +408,6 @@
populateLists();
- var tabList = document.querySelectorAll("#main-navigation-tabs li");
- for (var i = 0; i < tabList.length; i++)
- {
- tabList[i].addEventListener("click", function(e)
- {
- document.body.dataset.tab = e.currentTarget.dataset.show;
- }, false);
- }
-
function onFindLanguageKeyUp()
{
var searchStyle = E("search-style");
@@ -391,42 +448,15 @@
updateShareLink();
// Initialize interactive UI elements
+ document.body.addEventListener("click", onClick, false);
var placeholderValue = ext.i18n.getMessage("options_dialog_language_find");
E("find-language").setAttribute("placeholder", placeholderValue);
- E("add-blocking-list").addEventListener("click", function()
- {
- openDialog("customlist");
- }, false);
- E("add-website-language").addEventListener("click", function()
- {
- openDialog("language");
- }, false);
- E("dialog-close").addEventListener("click", function()
- {
- delete document.body.dataset.dialog;
- }, false);
- E("edit-ownBlockingList-button").addEventListener("click", editCustomFilters, false);
E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
- E("whitelisting").addEventListener("click", function(e)
- {
- var id = e.target.id;
- if (id == "whitelisting-add-icon" || id == "whitelisting-enter-icon")
- addWhitelistedDomain();
- else if (id == "whitelisting-cancel-button")
- E("whitelisting-textbox").value = "";
- }, false);
- E("whitelisting-add-button").addEventListener("click", addWhitelistedDomain, false);
E("whitelisting-textbox").addEventListener("keypress", function(e)
{
if (isEnterPressed(e))
addWhitelistedDomain();
}, false);
- E("import-blockingList-button").addEventListener("click", function()
- {
- var url = E("blockingList-textbox").value;
- addEnableSubscription(url);
- delete document.body.dataset.dialog;
- }, false);
// Advanced tab
var filterTextbox = document.querySelector("#custom-filters-add input");
@@ -448,34 +478,11 @@
addCustomFilters();
}, false);
var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");
- E("custom-filters-edit-wrapper").addEventListener("click", function(e)
- {
- var target = null;
- if (e.target.localName == "button")
- target = e.target;
- else if (e.target.parentElement.localName == "button")
- target = e.target.parentElement;
- else
- return;
-
- var id = target.id;
- E("custom-filters").classList.toggle("mode-edit");
- if (id == "custom-filters-show-edit")
- editCustomFilters();
- else if (id == "custom-filters-raw-save")
- {
- ext.backgroundPage.sendMessage(
- {
- type: "filters.importRaw",
- text: E("custom-filters-raw").value
- });
- }
- }, false);
}
function openDialog(name)
{
- document.body.dataset.dialog = name;
+ document.body.setAttribute("data-dialog", name);
}
function populateLists()
@@ -656,12 +663,6 @@
}
}
- function showAddSubscriptionDialog(subscription)
- {
- E("blockingList-textbox").value = subscription.url;
- openDialog("customlist");
- }
-
function updateShareLink()
{
ext.backgroundPage.sendMessage(
@@ -700,8 +701,11 @@
case "app.listen":
if (message.action == "addSubscription")
{
- E("blockingList-textbox").value = message.args[0].url;
- openDialog("customlist");
+ var subscription = message.args[0];
+ var dialog = E("dialog-content-predefined");
+ dialog.querySelector("h3").textContent = subscription.title || "";
+ dialog.querySelector(".url").textContent = subscription.url;
+ openDialog("predefined");
}
else if (message.action == "error")
{
diff --git a/skin/options.css b/skin/options.css
index 2f5d070..fd8b56c 100644
--- a/skin/options.css
+++ b/skin/options.css
@@ -828,7 +828,6 @@ body[data-dialog] #dialog-background
background-color: #FFFFFF;
border: 2px solid #4D9D4B;
border-radius: 3px;
- display: none;
margin: auto;
position:absolute;
top:100px;
@@ -915,27 +914,11 @@ body[data-dialog] #dialog-background
color: #FFFFFF;
}
-#dialog-title > span
-{
- display: none;
-}
-
-body[data-dialog="customlist"] #dialog-title-customlist,
-body[data-dialog="language"] #dialog-title-language
-{
- display: inline;
-}
-
#dialog-body .dialog-content-block
{
padding: 12px 0px;
}
-#dialog-body .dialog-content
-{
- display: none;
-}
-
#dialog .button-wrapper
{
background-color: #F5F5F5;
@@ -954,11 +937,22 @@ body[data-dialog="language"] #dialog-title-language
vertical-align: top;
}
-body[data-dialog="customlist"] #dialog-content-customlist,
-body[data-dialog="language"] #dialog-content-language,
-body[data-dialog] #dialog
+#dialog .url
{
- display: block;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ word-wrap: break-word;
+}
+
+body:not([data-dialog="custom"]) #dialog-title-custom,
+body:not([data-dialog="custom"]) #dialog-content-custom,
+body:not([data-dialog="language"]) #dialog-title-language,
+body:not([data-dialog="language"]) #dialog-content-language,
+body:not([data-dialog="predefined"]) #dialog-title-predefined,
+body:not([data-dialog="predefined"]) #dialog-content-predefined,
+body:not([data-dialog]) #dialog
+{
+ display: none;
}
#other-language .button-add
--
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