Bug 1155345 - UI affordance during loading of list items in about:passwords.r=liuche

mobile/android/chrome/content/aboutLogins.js

@@ -45,6 +45,7 @@ let Logins = {
 
   _getLogins: function() {
     let logins;
+    this._toggleListBody(true);
     try {
       logins = Services.logins.getAllLogins();
     } catch(e) {
@@ -52,11 +53,25 @@ let Logins = {
       debug("Master password permissions error: " + e);
       logins = [];
     }
-
+    this._toggleListBody(false);
     logins.sort((a, b) => a.hostname.localeCompare(b.hostname));
     return this._logins = logins;
   },
 
+  _toggleListBody: function(isLoading) {
+    let nonemptyBody = document.getElementById("logins-list-nonempty-body");
+    let loadingBody = document.getElementById("logins-list-loading-body");
+
+    if (isLoading) {
+      nonemptyBody.classList.add("hidden");
+      loadingBody.classList.remove("hidden");
+    } else {
+      loadingBody.classList.add("hidden");
+      nonemptyBody.classList.remove("hidden");
+    }
+
+  },
+
   init: function () {
     window.addEventListener("popstate", this , false);
 

mobile/android/chrome/content/aboutLogins.xhtml

@@ -36,6 +36,11 @@
           <div id="filter-clear"/>
         </div>
       </div>
+      <div id="logins-list-loading-body" class="hidden">
+        <div id="loading-img-container">
+          <object type="image/svg+xml" id="spinner" data="chrome://browser/skin/images/spinning_throbber.svg"/>
+        </div>
+      </div>
     </div>
 
     <div id="edit-login-page" class="hidden">

mobile/android/themes/core/aboutLogins.css

@@ -184,3 +184,15 @@ body {
     background-image: url("resource://android/res/drawable-xhdpi-v4/favicon_globe.png");
   }
 }
+
+#loading-img-container{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#spinner {
+  margin-top: 60px;
+  height: 60px;
+  width: 60px;
+}

mobile/android/themes/core/images/spinning_throbber.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+  <style type="text/css">
+    .spinner {
+      animation: rotator 1.4s linear infinite;
+      }
+
+    @keyframes rotator {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(270deg);
+      }
+    }
+
+    .path {
+      stroke-dasharray: 187;
+      stroke-dashoffset: 0;
+      transform-origin: center;
+      animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+    }
+
+    @keyframes colors {
+      0% {
+        stroke: #FF9500;
+      }
+      25% {
+        stroke: #FF9500;
+      }
+      50% {
+        stroke: #FF9500;
+      }
+      75% {
+        stroke: #FF9500;
+      }
+      100% {
+        stroke: #FF9500;
+      }
+    }
+
+    @keyframes dash {
+      0% {
+        stroke-dashoffset: 187;
+      }
+      50% {
+        stroke-dashoffset: 46.75;
+        transform: rotate(135deg);
+      }
+      100% {
+        stroke-dashoffset: 187;
+        transform: rotate(450deg);
+      }
+    }
+  </style>
+  <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+</svg>

mobile/android/themes/core/jar.mn

@@ -45,6 +45,7 @@ chrome.jar:
 
 #ifdef NIGHTLY_BUILD
 * skin/aboutLogins.css                      (aboutLogins.css)
+  skin/images/spinning_throbber.svg         (images/spinning_throbber.svg)
 #endif
 
   skin/images/search.png                    (images/search.png)