Bug 903134 - Clean up Trusted UI on mozbrowsererror, mozbrowserclose

mozilla-b2g · Feb 21, 2014 · ed13bdb · ed13bdb
1 parent 5baee2e
commit ed13bdb
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 10 deletions.
diff --git a/apps/system/index.html b/apps/system/index.html
@@ -736,7 +736,19 @@ <h1 id="trustedui-title"></h1>
                 <div id="trustedui-throbber"></div>
               </header>
             </section>
-            <div id="trustedui-frame-container"></div>
+            <div id="trustedui-frame-container">
+              <div id="trustedui-error-dialog" role="dialog" class="generic-dialog">
+                <div class="inner">
+                  <h3 data-l10n-id="error-title" id="trustedui-error-title">Error</h3>
+                  <p>
+                  <span data-l10n-id="error-message" id="trustedui-error-message">The app has encountered an error.</span>
+                  </p>
+                </div>
+                <menu data-items="1">
+                  <button id="trustedui-error-close" data-l10n-id="close">Close</button>
+                </menu>
+              </div>
+            </div>
           </div>
         </div>
 

diff --git a/apps/system/js/trusted_ui.js b/apps/system/js/trusted_ui.js
@@ -33,6 +33,12 @@ var TrustedUIManager = {
 
   closeButton: document.getElementById('trustedui-close'),
 
+  errorTitle: document.getElementById('trustedui-error-title'),
+
+  errorMessage: document.getElementById('trustedui-error-message'),
+
+  errorClose: document.getElementById('trustedui-error-close'),
+
   hasTrustedUI: function trui_hasTrustedUI(origin) {
     return (this._dialogStacks[origin] && this._dialogStacks[origin].length);
   },
@@ -55,6 +61,7 @@ var TrustedUIManager = {
     window.addEventListener('keyboardhide', this);
     window.addEventListener('keyboardchange', this);
     this.closeButton.addEventListener('click', this);
+    this.errorClose.addEventListener('click', this);
   },
 
   open: function trui_open(name, frame, chromeEventId, onCancelCB) {
@@ -216,12 +223,17 @@ var TrustedUIManager = {
     dataset.frameOrigin = this._lastDisplayedApp;
 
     // Add mozbrowser listeners.
+    this.mozBrowserEventHandler = this.handleBrowserEvent.bind(this);
+    frame.addEventListener('mozbrowsererror',
+                           this.mozBrowserEventHandler);
+    frame.addEventListener('mozbrowserclose',
+                           this.mozBrowserEventHandler);
     frame.addEventListener('mozbrowserloadstart',
-                           this.handleBrowserEvent);
+                           this.mozBrowserEventHandler);
     frame.addEventListener('mozbrowserloadend',
-                           this.handleBrowserEvent);
+                           this.mozBrowserEventHandler);
 
-    // Make a shiny new dialog object.
+    // make a shiny new dialog object.
     var dialog = {
       name: name,
       frame: frame,
@@ -272,9 +284,13 @@ var TrustedUIManager = {
       if (stack[i].chromeEventId === chromeEventId) {
         var frame = stack.splice(i, 1)[0].frame;
         frame.removeEventListener('mozbrowserloadstart',
-                                  this.handleBrowserEvent);
+                                  this.mozBrowserEventHandler);
         frame.removeEventListener('mozbrowserloadend',
-                                  this.handleBrowserEvent);
+                                  this.mozBrowserEventHandler);
+        frame.removeEventListener('mozbrowsererror',
+                                  this.mozBrowserEventHandler);
+        frame.removeEventListener('mozbrowserclose',
+                                  this.mozBrowserEventHandler);
         this.container.removeChild(frame);
         found = true;
         break;
@@ -334,17 +350,35 @@ var TrustedUIManager = {
     }
   },
 
+  _showError: function trui_showError(errorProperty) {
+    var dialog = this._getTopDialog();
+    var frame = dialog.frame;
+    if (!('error' in frame.dataset)) {
+      this.container.classList.remove('error');
+      return;
+    }
+
+    var name = dialog.name;
+    var _ = navigator.mozL10n.get;
+
+    this.errorTitle.textContent = _('error-title', {name: name});
+    this.errorMessage.textContent = _(errorProperty, {name: name});
+
+    this.container.classList.add('error');
+  },
+
   handleEvent: function trui_handleEvent(evt) {
     switch (evt.type) {
       case 'home':
       case 'holdhome':
-        if (!this.isVisible())
+        if (!this.isVisible()) {
           return;
-
+        }
         this._hideTrustedApp();
         break;
       case 'click':
-        // Close-button clicked
+        // cancel button or error close button
+        this.container.classList.remove('error');
         this._destroyDialog();
         break;
       case 'appterminated':
@@ -408,9 +442,17 @@ var TrustedUIManager = {
       case 'mozbrowserloadend':
         TrustedUIManager.throbber.classList.remove('loading');
         break;
+      case 'mozbrowsererror':
+        this._getTopDialog().frame.dataset.error = true;
+        this._showError('crash-banner-app');
+        break;
+      case 'mozbrowserclose':
+        // window.close
+        this.container.classList.remove('error');
+        this._destroyDialog();
+        break;
     }
   }
-
 };
 
 TrustedUIManager.init();

diff --git a/apps/system/style/trusted_ui/trusted_ui.css b/apps/system/style/trusted_ui/trusted_ui.css
@@ -81,3 +81,24 @@
 #trustedui-inner iframe:not(.selected) {
   display: none;
 }
+
+#trustedui-error-dialog {
+  -moz-box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  z-index: 1024;
+  display: none;
+  background-color: black;
+  background-image: url(../modal_dialog/images/error_bk.png);
+}
+
+#trustedui-frame-container.error > #trustedui-error-dialog {
+  display: block;
+}
+
+#trustedui-frame-container > * {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+