Merge pull request #110 from kaixinjxq/master

Add the 'Run in Web Test Client app' pupup.

Author: yugang

wts/runner/index.html

@@ -18,7 +18,15 @@
 <div class="container" style="display:none;" id="container">
 
   <div id="testControl" class="panel hide_panel_border">
-  <div id="test_select_div">
+  
+  <div id="popup" class="popup">
+  <span class="link_popup">
+  Run in Web Test Client app
+  </span>
+  <span class="glyphicon glyphicon-remove cancel_popup"></span>
+  </div>
+ 
+  <div id="test_select_div" class="">
     <div id="spec_tabs">
     <ul class="my_nav my_nav-tabs">
 	   <li id="li_select_test_specs" class="my_active tab_li">

wts/runner/runner.css

@@ -215,6 +215,7 @@ body {
 
 .navbar{
     margin-bottom:0px;
+    border:0px;
 }
 
 .navbar-brand{
@@ -1073,4 +1074,36 @@ li.specname label{
     padding:.0625em;
     -webkit-border-radius:2.25em;
     border-radius:2.25em;
-}
+}
+
+.popup {
+    position: fixed;
+    top: 50px;
+    left: 0;
+    right: 0;
+    display: block;
+    background: #444;
+    color: #fff;
+    height: 60px;
+    padding-top: 20px;
+    display: none;
+    z-index: 1001;
+}
+.margin_top_50{
+    margin-top: 50px;
+}
+
+.cancel_popup{
+    float:right;
+    padding-right:15px;
+    padding-top:-15px;
+    cursor: pointer;
+}
+
+.link_popup{
+    background-color:#EC543B;
+    padding:7px;
+    color:#fff;
+    margin-left:40px;
+    cursor: pointer;
+}

wts/runner/runner.js

@@ -24,6 +24,15 @@ Manifest.prototype = {
             document.getElementById("over").style.display = "none";
             document.getElementById("layout").style.display = "none";
             document.getElementById("container").style.display = "block";
+            var popup_text = navigator.userAgent;
+            if (popup_text.indexOf("Android") != -1 && popup_text.indexOf("Crosswalk") == -1){
+                var cookie_item = get_popup_cookie("wts_client");
+                if (cookie_item == ""){
+                    set_popup_cookie("wts_client", "yes", 30);
+                    document.getElementById("popup").style.display = "block";
+                    document.getElementById("test_select_div").classList.add("margin_top_50");
+                }
+            }
             this.data = JSON.parse(xhr.responseText);
             loaded_callback();
         }.bind(this);
@@ -720,7 +729,21 @@ function TestControl(elem, runner) {
     this.advanced_link = this.elem.querySelector(".advanced_link");
     this.advanced_div = this.elem.querySelector(".advanced_div");
     this.start_error = this.elem.querySelector(".start_error");
-    this.set_start();
+    this.cancel_link = this.elem.querySelector("span.cancel_popup");
+    this.spec_link = this.elem.querySelector("span.link_popup");
+    this.popup_div = this.elem.querySelector("div.popup");
+    this.test_select_div = this.elem.querySelector("div#test_select_div");
+
+    this.set_start();  
+
+    this.cancel_link.onclick = function(){
+        this.popup_div.style.display = "none";
+        this.test_select_div.classList.remove("margin_top_50");
+    }.bind(this);
+    
+    this.spec_link.onclick = function(){
+        window.location.href = "https://github.com/crosswalk-project/web-testing-service/wiki#download";
+    }.bind(this);
 
     this.select_tab.onclick = function(){
         this.select_select_tab();
@@ -803,6 +826,8 @@ TestControl.prototype = {
             this.start_li.classList.remove("width_100");
             this.start_li.classList.add("width_49_75");
             this.pause_button.classList.remove("button_hidden");
+            this.popup_div.style.display = "none";
+            this.test_select_div.classList.remove("margin_top_50");
             window.scrollTo(0,0);
             var run_mode = "window";
             if (this.iframe_checkbox.checked) {
@@ -1348,6 +1373,26 @@ Runner.prototype = {
 
 };
 
+function set_popup_cookie(cookie_name,cookie_value,cookie_exdays) {
+    var d = new Date();
+    d.setTime(d.getTime() + (cookie_exdays*24*60*60*1000));
+    var expires = "expires="+d.toUTCString();
+    document.cookie = cookie_name + "=" + cookie_value + "; " + expires;
+}
+
+function get_popup_cookie(cname) {
+    var name = cname + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0; i<ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1);
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
 function parseOptions() {
     var options = {
         test_types: ["testharness", "reftest", "manual"]