Issue 2844 - Create Microsoft Edge coming soon landing page

includes/index.tmpl

 title=Adblock Plus - Surf the web without annoying ads!
 noheading=True
 localefile=index
 
 {#
  # This file is part of the Adblock Plus website,
  # Copyright (C) 2006-2015 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
@@ skipping 47 matching lines @@
         </li>
         <li class="emphasized" id="feature-free" itemprop="featureList">
           <div class="sprite"></div>
 {{"It's free!"|translate("s9")}}
           <span class="license-note" style="display: inline">{{"(<a href=\"https://www.gnu.org/licenses\">GPLv3</a>)"|translate("s10")}}</span>
         </li>
         <li id="feature-maxthon" itemprop="featureList">
           <div class="sprite"></div>
 {{"Integrated by default in"|translate("s11")}} <a href="http://www.maxthon.com/" target="_blank">{{"Maxthon Cloud Browser"|translate("s12")}}</a>
         </li>
-        <li id="feature-edge" itemprop="featureList">

[saroyanm, 2015/09/22 13:15:45]

It's not part of the feature block, so please move it to it's own block between
"features" and "install" block, you can give it more specific ID and access
Form, Button and textbox through that block. Ex.: edge-subscription.
So you will access the mentioned elements like: "#edge-subscription form",
"#edge-subscription button" (or if you want to be more specific than you can use
"#edge-subscription button[type=submit]") and "#edge-subscription input".

[Oleksandr, 2015/09/23 00:37:57]

I agree that it makes sense to move this away from the UL, however I don't see
how would getting rid of the IDs be useful. We used IDs in for the iOS
subscription page, and if we remove them here, there will be a lot of
querySelector calls in JavaScript in index.js, which is slower and less
intuitive, IMO.

[saroyanm, 2015/09/23 12:44:20]

My point was about CSS actually, but still.
I can see several reason why I'd prefer not use ID for each element here, beside
that It's not good experience to assign ID to each element IMO: 
1. It will minimize the risk of ID duplication
2. You can reuse the styles for the child elements for future forms on homepage
(well this point is not related, but when you have IDs people intentionally can
try assign styles to IDs)
3. You can reuse the function for future forms on the page, otherwise we will
need to modify current implementation and retest it, which can lead to errors in
future.
Yes we used IDs, but the page wasn't so complex, you can use edge block to
related to child elements and use getElementsByTagName and
getElementsByClassName, shouldn't harm the performance that much, beside that
the  script will be executed on submission, the only script that will run before
submission is the placeholder hack for old browsers, so we are covering most
cases IMO, so performance wise we are okey here.

-          <p class="subscribe-description">

[saroyanm, 2015/09/22 13:15:45]

It's probably not description and even you can and also I'd more consider it as
a heading the edge block, so you can use heading here and remove class
attribute.

-            {{"Get a heads-up prior to the launch!"|translate("subscription-description")}}
-          </p>
-          <form id="subscribe-form" accept-charset="utf-8" action="/submitEmail" method="post">

[saroyanm, 2015/09/22 13:15:45]

If you will do changes mentioned above you will not need this generic ID
assigned to the form, to the button and to the inputbox.

-            <input id="subscribe-textbox" type="email" name="email" placeholder="{{"Your email address"|translate("subscription-input-placeholder")}}" required />
-            <button id="subscribe-button" type="submit"><span>{{"Notify me"|translate("subscription-button")}}</span></button>
-            <span class="sucess-label">
-              {{"A confirmation email has been sent. Please check your email and click the confirmation link."|translate("subscription-message-success")}}
-            </span>
-            <span class="invalid-label">
-              {{"Please enter a valid email address."|translate("subscription-message-invalid-email")}}
-            </span>
-            <span id="response-error">

[saroyanm, 2015/09/22 13:15:45]

I'd use class here as well, so it can be applied to other forms on current page
and will be consistent with the previous comments I've made.

-            </span>
-          </form>
-      </li>
       </ul>
+    </div>
+
+    <div id="edge-subscription">
+      <h3>
+        {{"Get a heads-up prior to the launch!"|translate("subscription-description")}}
+      </h3>
+      <form accept-charset="utf-8" method="post">
+        <input class="subscribe-textbox" type="email" name="email" placeholder="{{"Your email address"|translate("subscription-input-placeholder")}}" required />
+        <input type="hidden" name="lang" value="{{locale}}" />
+        <input type="hidden" name="product" value="{{page}}" />
+        <button type="submit"><span>{{"Notify me"|translate("subscription-button")}}</span></button>
+        <span class="sucess-label">
+          {{"A confirmation email has been sent. Please check your email and click the confirmation link."|translate("subscription-message-success")}}
+        </span>
+        <span class="invalid-label">
+          {{"Please enter a valid email address."|translate("subscription-message-invalid-email")}}
+        </span>
+        <span class="response-error">
+        </span>
+      </form>
     </div>
 
     <div id="install">
       <a class="install-button" href="https://update.adblockplus.org/latest/adblockplusfirefox.xpi" id="install-firefox">{{"Install for Firefox"|translate("s13")}}</a>
       <a class="install-button" href="https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb" id="install-chrome" onclick="chrome.webstore.install(); return false;">{{"Install for Chrome"|translate("s14")}}</a>
       <a class="install-button" href="https://addons.opera.com/extensions/details/opera-adblock/?display=en-US" id="install-opera">{{"Install for Opera"|translate("s15")}}</a>
       <a class="install-button" href="android-install" id="install-android">{{"Install for Android"|translate("s16")}}</a>
       <a class="install-button" href="https://update.adblockplus.org/latest/adblockplusie.exe" id="install-internet-explorer">{{"Install for Internet Explorer"|translate("s17")}}</a>
       <a class="install-button" href="https://update.adblockplus.org/latest/adblockplussafari.safariextz" id="install-safari">{{"Install for Safari"|translate("s18")}}</a>
       <a class="install-button" href="https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb" id="install-yandex-browser" onclick="chrome.webstore.install(); return false;">{{"Install for Yandex Browser"|translate("s19")}}</a>
@@ skipping 42 matching lines @@
     <div class="warning-platform chrome">{{"It appears that you are using Google Chrome."|translate("s30")}} <a href="chrome">{{"Switch to Adblock Plus for Chrome."|translate("s31")}}</a></div>
     <div class="warning-platform android">{{"It appears that you are using Android."|translate("s32")}} <a href="android">{{"Switch to Adblock Plus for Android."|translate("s33")}}</a></div>
     <div class="warning-platform opera">{{"It appears that you are using Opera."|translate("s34")}} <a href="opera">{{"Switch to Adblock Plus for Opera."|translate("s35")}}</a></div>
     <div class="warning-platform internet-explorer">{{"It appears that you are using Internet Explorer."|translate("s36")}} <a href="internet-explorer">{{"Switch to Adblock Plus for Internet Explorer."|translate("s37")}}</a></div>
     <div class="warning-platform safari">{{"It appears that you are using Safari."|translate("s38")}} <a href="safari">{{"Switch to Adblock Plus for Safari."|translate("s39")}}</a></div>
     <div class="warning-platform yandex-browser">{{"It appears that you are using Yandex Browser."|translate("s40")}} <a href="yandex-browser">{{"Switch to Adblock Plus for Yandex Browser."|translate("s41")}}</a></div>
     <div class="warning-platform maxthon">{{"It appears that you are using Maxthon."|translate("s42")}} <a href="maxthon">{{"Switch to Adblock Plus for Maxthon."|translate("s43")}}</a></div>
   </div>
   <iframe frameborder="0" height="285" id="video" itemprop="video" src="//www.youtube-nocookie.com/embed/pVYtzF5SemU?html5=1&amp;autohide=1&amp;enablejsapi=1&amp;controls=2&amp;fs=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme=light" width="520"></iframe>
   <img height="305" id="maxthon-instruction" src="/img/maxthon-instruction.png" width="540">
-  <img id="edge-teaser" src="/img/edge_teaser.png">
+  <img id="edge-teaser" src="/img/edge_teaser.png" alt={{"Comming soon image of Adblock Plus for Microsoft Edge"|translate("edge-teaser")}} />
 </div>
 
 <div id="key-facts">
   <section class="first">
     <div class="sprite" id="facts-open-source"></div>
     <h1>{{"Open Source"|translate("s44")}}</h1>
     <p>
         {{"Adblock Plus is an open source project.\n      <a href=\"contribute\">Join us!</a>"|translate("s45")}}
     </p>
   </section>
@@ skipping 211 matching lines @@
       <h2>{{"Be notified when Adblock Plus for Microsoft Edge is available!"|translate("abp-for-edge-be-notified")}}</h2>
 
       <p>
         {{"Microsoft Edge <a href='https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508820-javascript-browser-extensions'>does not yet support extensions</a>. However, you can be sure that a version of Adblock Plus for Microsoft Edge will be released as soon as possible. Enter your email in the field above to receive a notification when Adblock Plus for Microsoft Edge is available. While you're waiting, you may want to try the latest version of Adblock Plus for Internet Explorer."|translate("ms-edge-description")}}
       </p>
     </div>
   </div>
 </section>
 
 <script src="/js/index.js"></script>