Merge pull request #67 from mozilla-b2g/ato/bug-996321/1

Bug 996321 - Position prompt dialog at the centre of the viewport

webapi_tests/semiauto/static/app.html

@@ -30,15 +30,17 @@ <h1>Test Runner</h1>
         </tr>
       </table>
 
-      <div id="overlay" class="overlay hidden">
-        <div class="dialog_box">
-          <p id="dialog_text"></p>
+      <div id="dialog" class="hidden">
+        <div>
+          <div class="content">
+            <p id="dialog_text"></p>
+          </div>
 
-          <p>
+          <div class="controls">
             <input type="text" id="dialog_response" />
             <button id="ok">OK</button>
             <button id="cancel">Cancel</button>
-          </p>
+          </div>
         </div>
       </div>
     </div>

webapi_tests/semiauto/static/app.js

@@ -101,11 +101,11 @@ TestListView.prototype = {
 // confirmation will show a dialogue with a question, and two buttons:
 // "Yes" and "No".
 function Dialog(msg, type) {
-  this.overlayEl = $("#overlay");
-  this.textEl = $("#dialog_text");
-  this.responseEl = $("#dialog_response");
-  this.okEl = $("#ok");
-  this.cancelEl = $("#cancel");
+  this.el = $("#dialog");
+  this.textEl = $("#dialog .content");
+  this.responseEl = $("#dialog .controls input[type=text]");
+  this.okEl = $("#dialog .controls #ok");
+  this.cancelEl = $("#dialog .controls #cancel");
 
   this.okEl.onclick = function() { this.onok(); this.close(); }.bind(this);
   this.cancelEl.onclick = function() { this.oncancel(); this.close(); }.bind(this);
@@ -130,7 +130,7 @@ function Dialog(msg, type) {
 Dialog.prototype = {
   show: function() {
     this.textEl.innerHTML = this.message;
-    this.overlayEl.removeClass("hidden");
+    this.el.removeClass("hidden");
 
     switch (this.type) {
     case "instruct":
@@ -144,7 +144,7 @@ Dialog.prototype = {
   },
 
   close: function() {
-    this.overlayEl.addClass("hidden");
+    this.el.addClass("hidden");
     this.reset();
   },