No Issue - Implemented first run page

firstRun.js

Index: firstRun.js
===================================================================
--- a/firstRun.js
+++ b/firstRun.js
@@ -18,103 +18,87 @@
 /* globals checkShareResource, getDocLink, openSharePopup, setLinks, E */

[juliandoucette, 2017/10/21 16:18:43]

@greiner, @saroyanm

"[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated
because of its detrimental effects to the end user's experience. For more help,
check https://xhr.spec.whatwg.org/."

Is this something that we should worry about now?

[Thomas Greiner, 2017/10/23 12:01:55]

No, this issue only applies to the development environment because we have to
load translations synchronously to mock `chrome.i18n.getMessage()`. Obviously,
we still need to change our mock implementation at some point to avoid breakage
but it's not relevant for running the UI within the extension.

 
 "use strict";
 
 (function()
 {
   function onDOMLoaded()
   {
-    // Set up logo image
-    let logo = E("logo");
-    logo.src = "skin/abp-128.png";
-    let errorCallback = function()
+    function initLanguageSelection()
+    {
+      const locale = document.getElementById("navbar-locale-selected");
+      // skip if page does not have language selection (EG: blog)
+      if (!locale)
+        return;
+
+      locale.onclick = function()
+      {
+        toggleClass(document.getElementById("navbar-locale-menu"), "visible");
+      };
+    }
+
+    function navigationClick(event)
     {
-      logo.removeEventListener("error", errorCallback, false);
-      // We are probably in Chrome/Opera/Safari, the image has a different path.
-      logo.src = "icons/detailed/abp-128.png";
-    };
-    logo.addEventListener("error", errorCallback, false);
+      toggleClass(document.getElementById("navbar-menu"), "visible");
+    }
+
+    function initMenu()
+    {
+      document.getElementById("navbar-menu-toggle").onclick = navigationClick;
+    }
 
-    // Set up URLs
-    getDocLink("donate", (link) =>
+    function toggleClass(element, className)

[Thomas Greiner, 2017/10/23 13:17:43]

We've already been using `Element.classList` in other pages so please use it
instead of introducing those utility functions for handling CSS classes.

[juliandoucette, 2017/10/23 13:27:35]

He copied this from abp.org main.js. It's unclear to me whether we should
re-write this for abpui or just separate it. What do you think?

[juliandoucette, 2017/10/23 13:29:58]

(On that note, we could polyfill classList and refactor main.js in abp.org.)

[Thomas Greiner, 2017/10/23 16:45:49]

From what I see, if we remove the language selection code, there'd only be one
instance left where we actually use it. So I'd say there's little value in
keeping it just for the sake of consistency with Websites.
True, good idea.

[juliandoucette, 2017/10/24 14:22:18]

See https://codereview.adblockplus.org/29587659

[martin, 2017/10/26 10:33:16]

Done.

+    {
+      if (hasClass(element, className))
+        removeClass(element, className);
+      else
+        addClass(element, className);
+    }
+
+    function hasClass(element, className)
     {
-      E("donate").href = link;
-    });
+      return !!element.className.match("\\b" + escapeRegExp(className) + "\\b");
+    }
 
-    getDocLink("contributors", (link) =>
+    function addClass(element, className)
     {
-      E("contributors").href = link;
-    });
+      if (hasClass(element, className))
+        return;
+
+      if (element.className.length)
+        element.className += " ";
+      element.className += className;
+    }
 
-    getDocLink("acceptable_ads_criteria", (link) =>
+    function removeClass(element, className)
+    {
+      const regExp = new RegExp("\\s*\\b" + escapeRegExp(className) + "\\b\\s*");
+      element.className = element.className.replace(regExp, "");
+    }
+
+    function escapeRegExp(string)
     {
-      setLinks("acceptable-ads-explanation", link, openFilters);
-    });
+      return string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+    }
+
+    initLanguageSelection();
+    initMenu();
 
-    getDocLink("contribute", (link) =>
+    const optionsTrigger = E("options-trigger");
+
+    optionsTrigger.addEventListener("click", (e) =>
     {
-      setLinks("share-headline", link);
+      e.preventDefault();
+      openFilters();
     });
 
-    browser.runtime.sendMessage({
-      type: "app.get",
-      what: "issues"
-    }, (issues) =>
-    {
-      // Show warning if filterlists settings were reinitialized
-      if (issues.filterlistsReinitialized)
-      {
-        E("filterlistsReinitializedWarning").removeAttribute("hidden");
-        setLinks("filterlistsReinitializedWarning", openFilters);
-      }
-    });
-
-    updateSocialLinks();
-
-    ext.onMessage.addListener((message) =>
-    {
-      if (message.type == "subscriptions.respond")
-      {
-        updateSocialLinks();
-      }
-    });
-    browser.runtime.sendMessage({
-      type: "subscriptions.listen",
-      filter: ["added", "removed", "updated", "disabled"]
-    });
-  }
-
-  function updateSocialLinks()
-  {
-    for (let network of ["twitter", "facebook", "gplus"])
-    {
-      let link = E("share-" + network);
-      checkShareResource(link.getAttribute("data-script"), (isBlocked) =>
-      {
-        // Don't open the share page if the sharing script would be blocked
-        if (isBlocked)
-          link.removeEventListener("click", onSocialLinkClick, false);
-        else
-          link.addEventListener("click", onSocialLinkClick, false);
-      });
-    }
-  }
-
-  function onSocialLinkClick(event)
-  {
-    if (window.matchMedia("(max-width: 970px)").matches)
-      return;
-
-    event.preventDefault();
-
-    getDocLink(event.target.id, (link) =>
-    {
-      openSharePopup(link);
-    });
+    setLinks("first-column-description", " https://adblockplus.org/terms");
+    setLinks("third-column-description", "https://adblockplus.org/acceptable-ads#optout");
+    setLinks("copyright-notice", "https://eyeo.com");
   }
 
   function openFilters()
   {
     browser.runtime.sendMessage({type: "app.open", what: "options"});
   }
 
   document.addEventListener("DOMContentLoaded", onDOMLoaded, false);