Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
380 lines (340 sloc) 9.51 KB
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 name="viewport" content="width=480; initial-scale=.6667; user-scalable=0" />
<title>Firefox for Android - Web API Tests</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<link rel="shortcut icon" href="img/fx.png" />
</head>
<!-- This is a webapp to test the WebAPI functions provided by Mozilla Firefox for Android and B2G. -->
<body>
<div class="header">
Firefox for Android - API Testing
<img src="img/fx.png" class="icon"/>
</div>
<script src="js/start.js"></script>
<!--<div id="page_title" class="container">
<table class="table_view">
<tr>
<td>
Web API List
</td>
<td class="col_check">
Switch/Detail
</td>
<td class="col_status">
Status Result
</td>
</tr>
</table>
</div>-->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- INSTALL -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="div_install" class="container">
<table class="table_view">
<tr>
<td>
Installation
</td>
<td class="col_check">
<button id="install_button" class="test_button">Install</button>
</td>
<td class="col_status">
<p id="install_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/install.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- NOTIFICATIONS -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
Notifications API
</td>
<td class="col_check">
<button id="notification_button" class="test_button">Test</button>
</td>
<td class="col_status">
<p id="notification_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/notification.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- CONNECTION -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="connection" class="container">
<table class="table_view">
<tr>
<td>
Connection API
</td>
<td class="col_check">
</td>
<td class="col_status">
<section class="main-content">
<span id="status"></span>
</section>
</td>
</tr>
</table>
</div>
<style>
#connection {
height: 90px;
/*text-align: center;*/
}
#connection span {
height: 60px;
display: inline-block;
font-size: 24px;
padding-left: 70px;
background-repeat: no-repeat;
/*vertical-align: middle;*/
line-height: 60px;
background-image: url(img/online.png), url(img/offline.png);
}
#connection span.online {background-size: 60px 60px, 0 0}
#connection span.offline {background-size: 0 0, 60px 60px}
</style>
<script>
var statusElem = document.getElementById('status')
setInterval(function () {
statusElem.className = navigator.onLine ? 'online' : 'offline';
statusElem.innerHTML = navigator.onLine ? 'Online' : 'Offline';
}, 250);
function updateOnlineStatus(online) {
if (online) {
$("#connection span").className = "online";
$("#connection span").textContent = "Online";
$("#mapbutton").style.visibility = "visible";
} else {
$("#connection span").className = "offline";
$("#connection span").textContent = "Offline";
$("#mapbutton").style.visibility = "hidden";
}
}
document.body.addEventListener("offline", function () { updateOnlineStatus(false) }, false);
document.body.addEventListener("online", function () { updateOnlineStatus(true) }, false);
updateOnlineStatus(navigator.onLine);
</script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- VIBRATION -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
Vibration API
</td>
<td class="col_check">
<button id="vibrate_on" class="test_button">Vibrate</button>
<button id="vibrate_off" class="test_button">Stop</button>
</td>
<td class="col_status">
<p id="vib_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/vibrate.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- BATTERY -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
<a href="fulltest/batterystatus.html">Battery Status API</a>
</td>
<td class="col_check">
<p id="battery_check"></p>
</td>
<td class="col_status">
<p id="battery_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/battery.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- FULL SCREEN -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
Fullscreen API
</td>
<td class="col_check">
<button id="view-fullscreen">Fullscreen</button>
<button id="cancel-fullscreen">Exit FS</button>
<p>Fullscreen Videos</p>
<video id="mario-video" controls="controls">
<source src="http://www.archive.org/download/Mario1_507/Mario1_507_512kb.mp4">
<source src="http://www.archive.org/download/Mario1_507/Mario1_507.ogv">
</video>
<button id="video-fullscreen">FS Video</button>
</td>
<td class="col_status">
<p id="fs_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/fullscreen.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- CAMERA -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
Camera API
</td>
<td class="col_check">
<p>
<input type="file" id="take-picture" accept="image/*" width="20%">
</p>
Preview:
<p>
<img src="about:blank" alt="" id="show-picture" width="30%">
</p>
<p id="error"></p>
</td>
<td class="col_status">
<p id="camera_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/camera.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- TWITTER -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
Twitter
</td>
<td class="col_check">
<section class="main-content">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://aaronmt.github.com">Tweet</a>
</section>
<p class="footer"></p>
</td>
<td class="col_status">
<p id="social_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/twitter.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- SCREEN ORIENTATION -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
Screen Orientation API
</td>
<td class="col_check">
Orientation:
<p id="ori_display"></p>
</td>
<td class="col_status">
<p id="ori_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/orientation.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- GEOLOCATION -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
<a href="fulltest/geolocation.html">Geolocation API</a>
</td>
<td class="col_check">
<p id="geo_check"></p>
</td>
<td class="col_status">
<p id="geo_status"></p>
</td>
</tr>
</table>
</div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/geolocation.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ALARM -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!--
<div class="container">
<table class="table_view">
<tr>
<td>
<a href="fulltest/alarm.html">Alarm API</a>
</td>
<td class="col_check">
<p id="alarm_check"></p>
</td>
<td class="col_status">
<p id="alarm_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/alarm.js"></script>
-->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- IDLE -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
Idle API
</td>
<td class="col_check">
<p id="idle_check"></p>
</td>
<td class="col_status">
<p id="idle_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/idle.js"></script>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- DEVICE STORAGE -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="container">
<table class="table_view">
<tr>
<td>
Device Storage API
</td>
<td class="col_check">
<p id="ds_check"></p>
</td>
<td class="col_status">
<p id="ds_status"></p>
</td>
</tr>
</table>
</div>
<script src="js/ds.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.