Issue 5482 - Sidebar and about ABP dialog

new-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2017 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 532 matching lines @@
   {
     ext.backgroundPage.sendMessage(message, (errors) =>
     {
       if (errors.length > 0)
         alert(errors.join("\n"));
       else if (onSuccess)
         onSuccess();
     });
   }
 
-  function openDocLink(id)
-  {
-    getDocLink(id, (link) =>
-    {
-      if (id == "share-general")
-        openSharePopup(link);
-      else
-        location.href = link;
-    });
-  }
-
   function switchTab(id)
   {
     location.hash = id;
   }
 
   function execAction(action, element)
   {
     switch (action)
     {
       case "add-domain-exception":
@@ skipping 71 matching lines @@
         let listItem = findParentData(element, "access", true);
         if (listItem && !listItem.classList.contains("show-context-menu"))
           listItem.classList.add("show-context-menu");
         break;
       }
       case "open-dialog": {
         let dialog = findParentData(element, "dialog", false);
         openDialog(dialog);
         break;
       }
-      case "open-doclink": {
-        let doclink = findParentData(element, "doclink", false);
-        openDocLink(doclink);
-        break;
-      }
       case "remove-filter":
         ext.backgroundPage.sendMessage({
           type: "filters.remove",
           text: findParentData(element, "access", false)
         });
         break;
       case "remove-subscription":
         ext.backgroundPage.sendMessage({
           type: "subscriptions.remove",
           url: findParentData(element, "access", false)
@@ skipping 134 matching lines @@
         element = element.nextElementSibling || container.firstElementChild;
     }
 
     let actions = container.getAttribute("data-action").split(",");
     for (let action of actions)
     {
       execAction(action, element);
     }
   }
 
+  function updateTabLinks()

[juliandoucette, 2017/08/21 14:10:34]

NIT: Why not add these HREFs directly to new-options.html?

[saroyanm, 2017/08/21 15:20:22]

To avoid duplications, we do specify the target in datasets, so this should be
specified in 1 place, please note we don't optimizing here for SEO.

[juliandoucette, 2017/08/21 16:07:24]

NIT: You could *just* set a.href then and:

tabList.querySelector("li[aria-controls='content-" + tabId + "']")

OR

tabList.querySelector("li#tab-" + tabId + "']")

OR

tabList.querySelector("a[href='#" + tabId + "']").parentElement

elsewhere then. But I don't insist. 

[saroyanm, 2017/08/21 16:46:12]

I agree with you, I'll change this.

[saroyanm, 2017/08/23 13:35:45]

I've updated the tabs implementation.

+  {
+    let tabs = document.querySelectorAll("[role='tab']");

[juliandoucette, 2017/08/21 14:10:34]

NIT: Isn't this asking for trouble? e.g. if we add non-sidebar tabs in the
future

Suggest: "#sidebar .tabs a" (or equivalent)

[saroyanm, 2017/08/21 15:20:22]

Why is this trouble ? No, this logic I think should be general, but not sidebar
specific, until you intentionally making it sidebar specific, I don't think that
it's a case, here.

[juliandoucette, 2017/08/21 16:07:24]

Acknowledged.

Assuming that you want this to happen to all (not just sidebar) tabs in this
document in the future.

+    for (let i = 0; i < tabs.length; i++)
+      tabs[i].querySelector("a").href = "#" + tabs[i].dataset.tab;
+  }
+
   function selectTabItem(tabId, container, focus)
   {
     // Show tab content
     document.body.setAttribute("data-tab", tabId);
 
     // Select tab
     let tabList = container.querySelector("[role='tablist']");
     if (!tabList)
       return null;
 
@@ skipping 36 matching lines @@
   {
     populateLists();
 
     // Initialize navigation sidebar
     ext.backgroundPage.sendMessage({
       type: "app.get",
       what: "addonVersion"
     },
     (addonVersion) =>
     {
-      E("abp-version").textContent = addonVersion;
-    });
-    getDocLink("releases", (link) =>
-    {
-      E("link-version").setAttribute("href", link);
+      E("abp-version").textContent = getMessage("options_dialog_about_version",
+        [addonVersion]);
     });
 
-    updateShareLink();
     updateTooltips();
+    updateTabLinks();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
     document.body.addEventListener("keyup", onKeyUp, false);
     let exampleValue = getMessage("options_whitelist_placeholder_example",
       ["www.example.com"]);
     E("whitelisting-textbox").setAttribute("placeholder", exampleValue);
     E("whitelisting-textbox").addEventListener("keyup", (e) =>
     {
       E("whitelisting-add-button").disabled = !e.target.value;
     }, false);
 
+
+    getDocLink("contribute", (link) =>

[juliandoucette, 2017/08/21 14:10:34]

NIT: It seems like these should be batched somewhere e.g.

setDocLinks([
  [DOC_ID, DOM_ID, ATTR_NAME],
  [DOC_ID, DOM_ID, ATTR_NAME]
]);

Perhaps automatically via HTML attributes or className style.

[saroyanm, 2017/08/21 15:20:22]

Yes it's a plan for future. We might also have a ticket for that. If not we can
create one. Again, future enhancement or at least separate from this review.

[juliandoucette, 2017/08/21 16:07:25]

Acknowledged.

Will you check this?

[saroyanm, 2017/08/21 16:46:13]

https://issues.adblockplus.org/ticket/4856

[juliandoucette, 2017/08/22 10:10:44]

Acknowledged.

+    {
+      E("contribute").href = link;
+    });
     getDocLink("acceptable_ads_criteria", (link) =>
     {
       setLinks("enable-aa-description", link);
     });
 
     // Advanced tab
     let customize = document.querySelectorAll("#customize li[data-pref]");
     customize = Array.prototype.map.call(customize, (checkbox) =>
     {
       return checkbox.getAttribute("data-pref");
@@ skipping 255 matching lines @@
     ext.backgroundPage.sendMessage(message);
   }
 
   function onFilterMessage(action, filter)
   {
     switch (action)
     {
       case "added":
         filter[timestampUI] = Date.now();
         updateFilter(filter);
-        updateShareLink();
         break;
       case "loaded":
         populateLists();
         break;
       case "removed":
         let knownFilter = filtersMap[filter.text];
         if (whitelistedDomainRegexp.test(knownFilter.text))
           collections.whitelist.removeItem(knownFilter);
         else
           removeCustomFilter(filter.text);
 
         delete filtersMap[filter.text];
-        updateShareLink();
         break;
     }
   }
 
   function onSubscriptionMessage(action, subscription)
   {
     if (subscription.url in subscriptionsMap)
     {
       let knownSubscription = subscriptionsMap[subscription.url];
       for (let property in subscription)
@@ skipping 47 matching lines @@
         }
         else
         {
           collections.custom.removeItem(subscription);
           delete subscriptionsMap[subscription.url];
         }
         collections.filterLists.removeItem(subscription);
         break;
     }
 
-    updateShareLink();
   }
 
   function hidePref(key, value)
   {
     let element = document.querySelector("[data-pref='" + key + "']");
     if (element)
       element.setAttribute("aria-hidden", value);
   }
 
   function getPref(key, callback)
@@ skipping 40 matching lines @@
         break;
     }
 
     let checkbox = document.querySelector(
       "[data-pref='" + key + "'] button[role='checkbox']"
     );
     if (checkbox)
       checkbox.setAttribute("aria-checked", value);
   }
 
-  function updateShareLink()
-  {
-    let shareResources = [
-      "https://facebook.com/plugins/like.php?",
-      "https://platform.twitter.com/widgets/",
-      "https://apis.google.com/se/0/_/+1/fastbutton?"
-    ];
-    let isAnyBlocked = false;
-    let checksRemaining = shareResources.length;
-
-    function onResult(isBlocked)
-    {
-      isAnyBlocked |= isBlocked;
-      if (!--checksRemaining)
-      {
-        // Hide the share tab if a script on the share page would be blocked
-        E("tab-share").hidden = isAnyBlocked;
-      }
-    }
-
-    for (let sharedResource of shareResources)
-      checkShareResource(sharedResource, onResult);
-  }
-
   function getMessages(id)
   {
     let messages = [];
     for (let i = 1; true; i++)
     {
       let message = ext.i18n.getMessage(id + "_" + i);
       if (!message)
         break;
 
       messages.push(message);
@@ skipping 106 matching lines @@
   });
   ext.backgroundPage.sendMessage({
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
              "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
   window.addEventListener("hashchange", onHashChange, false);
 }