From d76640946ee8d90e57965472c104174ac79953a7 Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Thu, 21 Aug 2014 11:20:56 -0400
Subject: [PATCH] block ui while filter lists are reloaded

---
 3p-filters.html  | 17 +++++++++++++++++
 js/3p-filters.js | 19 ++++++++++++++-----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/3p-filters.html b/3p-filters.html
index b404fcd78..e8b045099 100644
--- a/3p-filters.html
+++ b/3p-filters.html
@@ -95,6 +95,21 @@ span.obsolete {
     height: 8em;
     white-space: nowrap;
     }
+body #loadingOverlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: white;
+    opacity: 0.5;
+    cursor: wait;
+    display: none;
+    z-index: 1000;
+    }
+body.loading #loadingOverlay {
+    display: block;
+    }
 </style>
 </head>
 
@@ -118,6 +133,8 @@ span.obsolete {
 <p style="margin: 0.25em 0 0 0"><button id="externalListsApply" disabled="true" data-i18n="3pExternalListsApply"></button></p>
 </div>
 
+<div id="loadingOverlay"></div>
+
 <script src="js/udom.js"></script>
 <script src="js/i18n.js"></script>
 <script src="js/dashboard-common.js"></script>
diff --git a/js/3p-filters.js b/js/3p-filters.js
index 8b85d8c19..a56da14a6 100644
--- a/js/3p-filters.js
+++ b/js/3p-filters.js
@@ -33,6 +33,7 @@ var cosmeticSwitch = true;
 var externalLists = '';
 var cacheWasPurged = false;
 var needUpdate = false;
+var loading = false;
 
 /******************************************************************************/
 
@@ -41,6 +42,7 @@ messaging.start('3p-filters.js');
 var onMessage = function(msg) {
     switch ( msg.what ) {
         case 'loadUbiquitousBlacklistCompleted':
+            loading = false;
             renderBlacklists();
             break;
 
@@ -230,7 +232,8 @@ var renderBlacklists = function() {
         uDom('#parseCosmeticFilters').prop('checked', listDetails.cosmetic === true);
         uDom('#lists').html(html.join(''));
         uDom('a').attr('target', '_blank');
-        updateApplyButtons();
+
+        updateWidgets();
     };
 
     messaging.ask({ what: 'getLists' }, onListsReceived);
@@ -287,7 +290,8 @@ var listsContentChanged = function() {
 
 // This is to give a visual hint that the selection of blacklists has changed.
 
-var updateApplyButtons = function() {
+var updateWidgets = function() {
+    uDom('body').toggleClass('loading', loading);
     uDom('#buttonApply').toggleClass('enabled', listsSelectionChanged());
     uDom('#buttonUpdate').toggleClass('enabled', listsContentChanged());
 };
@@ -303,7 +307,7 @@ var onListCheckboxChanged = function() {
         return;
     }
     listDetails.available[href].off = !this.checked;
-    updateApplyButtons();
+    updateWidgets();
 };
 
 /******************************************************************************/
@@ -329,13 +333,18 @@ var onPurgeClicked = function() {
     button.remove();
     if ( li.find('input').first().prop('checked') ) {
         cacheWasPurged = true;
-        updateApplyButtons();
+        updateWidgets();
     }
 };
 
 /******************************************************************************/
 
 var reloadAll = function(update) {
+    // Loading may take a while when resoruces are fetched from remote
+    // servers. We do not want the user to force reload while we are reloading.
+    loading = true;
+    updateWidgets();
+
     // Reload blacklists
     messaging.tell({
         what: 'userSettings',
@@ -394,7 +403,7 @@ var autoUpdateCheckboxChanged = function() {
 
 var cosmeticSwitchChanged = function() {
     listDetails.cosmetic = this.checked;
-    updateApplyButtons();
+    updateWidgets();
 };
 
 /******************************************************************************/