No Issue - Implemented first run page

firstRun.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 /* 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()
     {
-      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);
+      const locale = document.getElementById("navbar-locale-selected");
+      // skip if page does not have language selection (EG: blog)
+      if (!locale)
+        return;
 
-    // Set up URLs
-    getDocLink("donate", (link) =>
+      locale.onclick = function()
+      {
+        toggleClass(document.getElementById("navbar-locale-menu"), "visible");
+      };
+    }
+
+    function navigationClick(event)
     {
-      E("donate").href = link;
+      toggleClass(document.getElementById("navbar-menu"), "visible");
+    }
+
+    function initMenu()
+    {
+      document.getElementById("navbar-menu-toggle").onclick = navigationClick;
+    }
+
+    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)
+    {
+      return !!element.className.match("\\b" + escapeRegExp(className) + "\\b");
+    }
+
+    function addClass(element, className)
+    {
+      if (hasClass(element, className))
+        return;
+
+      if (element.className.length)
+        element.className += " ";
+      element.className += className;
+    }
+
+    function removeClass(element, className)
+    {
+      const regExp = new RegExp("\\s*\\b" + escapeRegExp(className) + "\\b\\s*");
+      element.className = element.className.replace(regExp, "");
+    }
+
+    function escapeRegExp(string)
+    {
+      return string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+    }
+
+    initLanguageSelection();
+    initMenu();
+
+    const optionsTrigger = E("options-trigger");
+
+    optionsTrigger.addEventListener("click", (e) =>
+    {
+      e.preventDefault();
+      openFilters();
     });
 
-    getDocLink("contributors", (link) =>
-    {
-      E("contributors").href = link;
-    });
-
-    getDocLink("acceptable_ads_criteria", (link) =>
-    {
-      setLinks("acceptable-ads-explanation", link, openFilters);
-    });
-
-    getDocLink("contribute", (link) =>
-    {
-      setLinks("share-headline", link);
-    });
-
-    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);
 }());