Merge pull request #11106 from daleharvey/814436

Bug 814436 - Ensure clear data dialogs have warning UI. r=benfrancis
mozilla-b2g · Jul 24, 2013 · 8b4e59e · 8b4e59e
2 parents d1388ba + 2eb14d5
commit 8b4e59e
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 42 deletions.
diff --git a/apps/browser/index.html b/apps/browser/index.html
@@ -192,13 +192,15 @@ <h1 data-l10n-id="login-to-a-website">Login to a website</h1>
 
     <form role="dialog" id="modal-dialog-confirm" data-type="confirm"
       tabindex="-1" hidden>
-      <!-- <section>
-             <p><span id="modal-dialog-confirm-message"></span></p>
-           </section>
-           <menu>
-             <button id="modal-dialog-confirm-cancel" data-l10n-id="cancel">Cancel</button>
-             <button id="modal-dialog-confirm-ok" data-l10n-id="ok">OK</button>
-           </menu> -->
+      <!--
+        <section>
+          <p><span id="modal-dialog-confirm-message"></span></p>
+        </section>
+        <menu>
+          <button id="modal-dialog-confirm-cancel" data-l10n-id="cancel">Cancel</button>
+          <button id="modal-dialog-confirm-ok" data-l10n-id="ok">OK</button>
+        </menu>
+      -->
     </form>
 
     <form role="dialog" id="modal-dialog-alert" data-type="confirm"
@@ -276,6 +278,20 @@ <h2 data-l10n-id="privacy-and-security">Privacy & Security</h2>
     <section id="save-media-status" role="status">
       <p> </p>
     </section>
+
+    <form role="dialog" id="danger-dialog" data-type="confirm"
+      tabindex="-1" hidden>
+      <!--
+        <section>
+          <p><span id="danger-dialog-message"></span></p>
+        </section>
+        <menu>
+          <button id="danger-dialog-cancel" data-l10n-id="cancel">Cancel</button>
+          <button id="danger-dialog-ok" data-l10n-id="ok" class="danger">OK</button>
+        </menu>
+      -->
+    </form>
+
   </body>
 
 </html>
diff --git a/apps/browser/js/browser.js b/apps/browser/js/browser.js
@@ -95,7 +95,7 @@ var Browser = {
       'ssl-indicator', 'tabs-badge', 'throbber', 'frames', 'main-screen',
       'crashscreen', 'bookmark-menu', 'bookmark-entry-sheet',
       'awesomescreen-cancel-button', 'startscreen', 'top-site-thumbnails',
-      'no-top-sites', 'tray'];
+      'no-top-sites', 'tray', 'danger-dialog'];
 
     // Loop and add element with camel style name to Modal Dialog attribute.
     elementIDs.forEach(function createElementRef(name) {
@@ -120,7 +120,8 @@ var Browser = {
       document.getElementById('modal-dialog-prompt'),
       document.getElementById('modal-dialog-confirm'),
       document.getElementById('modal-dialog-custom-prompt'),
-      document.getElementById('http-authentication-dialog')
+      document.getElementById('http-authentication-dialog'),
+      document.getElementById('danger-dialog')
     ];
 
     var filesToLoad = [
@@ -154,7 +155,10 @@ var Browser = {
       'bookmark-entry-sheet-cancel', 'bookmark-entry-sheet-done',
       'bookmark-title', 'bookmark-url', 'bookmark-previous-url',
       'bookmark-menu-add-home', 'new-tab-button',
-      'clear-private-data-button', 'results', 'tab-panels'
+      'clear-private-data-button', 'results', 'tab-panels',
+      'danger-dialog-message',
+      'danger-dialog-cancel',
+      'danger-dialog-ok'
     ];
 
     var loadBrowserFiles = function() {
@@ -198,7 +202,7 @@ var Browser = {
      this.aboutBrowserButton.addEventListener('click',
        this.showAboutPage.bind(this));
      this.clearHistoryButton.addEventListener('click',
-       this.handleClearHistory.bind(this));
+       this.clearHistoryPressed.bind(this));
      this.closeTab.addEventListener('click',
        this.handleCloseTab.bind(this));
      this.tryReloading.addEventListener('click',
@@ -222,7 +226,7 @@ var Browser = {
      this.topSiteThumbnails.addEventListener('click',
        this.followLink.bind(this));
      this.clearPrivateDataButton.addEventListener('click',
-       this.clearPrivateData.bind(this));
+       this.clearPrivateDataPressed.bind(this));
 
     this.tabsSwipeMngr.browser = this;
      ['mousedown', 'pan', 'tap', 'swipe'].forEach(function(evt) {
@@ -1861,43 +1865,73 @@ var Browser = {
     this.showPageScreen();
   },
 
-  handleClearHistory: function browser_handleClearHistory() {
-    var msg = navigator.mozL10n.get('confirm-clear-browsing-history');
-    if (confirm(msg)) {
-      Places.clearHistory((function() {
+  showDangerDialog: function browser_showDangerDialog(title, btn, callback) {
+    var self = this;
+    var msg = navigator.mozL10n.get(title);
 
-        this.clearHistoryButton.setAttribute('disabled', 'disabled');
+    var ok = function(e) {
+      e.preventDefault();
+      removeEventListeners();
+      btn.setAttribute('disabled', 'disabled');
+      self.dangerDialog.hidden = true;
+      callback();
+    };
 
-        Places.getTopSites(this.MAX_TOP_SITES, null,
-          this.showTopSiteThumbnails.bind(this));
+    var cancel = function(e) {
+      e.preventDefault();
+      removeEventListeners();
+      self.dangerDialogCancel.removeEventListener('click', cancel);
+      self.dangerDialog.hidden = true;
+    };
 
-        var self = this;
-        var tabIds = Object.keys(this.tabs);
-        tabIds.forEach(function(tabId) {
-          var tab = self.tabs[tabId];
-          if (tab.dom.purgeHistory) {
-            tab.dom.purgeHistory().onsuccess = function(e) {
-              if (tab == self.currentTab) {
-                Toolbar.refreshButtons();
-              }
-            };
-          }
-        });
-      }).bind(this));
+    var removeEventListeners = function() {
+      self.dangerDialogOk.removeEventListener('click', ok);
+      self.dangerDialogCancel.removeEventListener('click', cancel);
+    };
 
-      this.history.innerHTML = '';
-    }
+    this.dangerDialogMessage.textContent = msg;
+    this.dangerDialog.hidden = false;
+
+    this.dangerDialogOk.addEventListener('click', ok);
+    this.dangerDialogCancel.addEventListener('click', cancel);
+  },
+
+  clearHistoryPressed: function browser_clearHistoryPressed() {
+    this.showDangerDialog('confirm-clear-browsing-history',
+                     this.clearHistoryButton,
+                     this.clearHistory.bind(this));
+  },
+
+  clearPrivateDataPressed: function browser_clearPrivateDataPressed() {
+    this.showDangerDialog('confirm-clear-cookies-and-stored-data',
+                          this.clearPrivateDataButton,
+                          this.clearPrivateData.bind(this));
+  },
+
+  clearHistory: function browser_clearHistory() {
+    var self = this;
+    Places.clearHistory(function() {
+      Places.getTopSites(self.MAX_TOP_SITES, null,
+                         self.showTopSiteThumbnails.bind(self));
+      var tabIds = Object.keys(self.tabs);
+      tabIds.forEach(function(tabId) {
+        var tab = self.tabs[tabId];
+        if (tab.dom.purgeHistory) {
+          tab.dom.purgeHistory().onsuccess = function(e) {
+            if (tab == self.currentTab) {
+              Toolbar.refreshButtons();
+            }
+          };
+        }
+      });
+    });
   },
 
   clearPrivateData: function browser_clearPrivateData() {
-    var msg = navigator.mozL10n.get('confirm-clear-cookies-and-stored-data');
-    if (confirm(msg)) {
-      var request = navigator.mozApps.getSelf();
-      request.onsuccess = (function() {
-        request.result.clearBrowserData();
-        this.clearPrivateDataButton.setAttribute('disabled', 'disabled');
-      }).bind(this);
-    }
+    var request = navigator.mozApps.getSelf();
+    request.onsuccess = function() {
+      request.result.clearBrowserData();
+    };
   },
 
   screenSwipeMngr: {

diff --git a/apps/browser/style/browser.css b/apps/browser/style/browser.css
@@ -837,6 +837,10 @@ li[role="listitem"] small {
   display: none;
 }
 
+#danger-dialog {
+  z-index: 200;
+}
+
 #settings ul {
   margin: 0;
   padding: 0;