Bug 1204510 - Replace animated SVG spinner with non-SVG equivalent. r=ally
authorNick Alexander <nalexander@mozilla.com>
Fri, 18 Sep 2015 16:07:38 -0400
changeset 295944 77cf41f9a222aba9e31fa9d670e050241dc2c695
parent 295943 30fffdc35b41018048efbcc2ae1ba201bc79d2db
child 295945 eb238855c2a06b4e685589a75494fa4a7202158b
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersally
bugs1204510
milestone43.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1204510 - Replace animated SVG spinner with non-SVG equivalent. r=ally The spinner itself is 60px square, colored like fennec_ui_orange. The HTML and CSS was hacked out of https://github.com/lightningtgc/material-refresh, tree https://github.com/lightningtgc/material-refresh/tree/6b1be0046d58230ecc00dc929557ad4b3459e304. The original code is licensed MIT. I pruned things we don't use, adjusted the box model for our use, changed the spinner color, and simplified the CSS.
mobile/android/chrome/content/aboutLogins.xhtml
mobile/android/themes/core/aboutLogins.css
mobile/android/themes/core/images/spinning_throbber.svg
mobile/android/themes/core/jar.mn
mobile/android/themes/core/spinner.css
--- a/mobile/android/chrome/content/aboutLogins.xhtml
+++ b/mobile/android/chrome/content/aboutLogins.xhtml
@@ -11,16 +11,17 @@
 <!-- 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/. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>&aboutLogins.title;</title>
     <meta name="viewport" content="width=device-width; user-scalable=0" />
     <link rel="icon" type="image/png" sizes="64x64" href="chrome://branding/content/favicon64.png" />
+    <link rel="stylesheet" href="chrome://browser/skin/spinner.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/skin/aboutBase.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/skin/aboutLogins.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://browser/content/aboutLogins.js"></script>
   </head>
   <body dir="&locale.dir;">
 
     <div id="logins-list-page">
       <div id="logins-header" class="header">
@@ -33,17 +34,32 @@
         <div id="logins-list" class="list"/>
         <div id="filter-input-container" hidden="true">
           <input id="filter-input" type="search"/>
           <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 id="spinner" class="mui-refresh-main">
+            <div class="mui-refresh-wrapper">
+              <div class="mui-spinner-wrapper">
+                <div class="mui-spinner-main">
+                  <div class="mui-spinner-left">
+                    <div class="mui-half-circle-left" />
+                  </div>
+                  <div class="mui-spinner-right">
+                    <div class="mui-half-circle-right" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
         </div>
       </div>
       <div id="empty-body" class="hidden">
         <div id="empty-obj-text-container">
           <object type="image/svg+xml" id="empty-icon" data="chrome://browser/skin/images/icon_key_emptypage.svg"/>
           <div class="empty-text">&aboutLogins.emptyLoginText;</div>
           <div class="empty-hint">&aboutLogins.emptyLoginHint;</div>
         </div>
--- a/mobile/android/themes/core/aboutLogins.css
+++ b/mobile/android/themes/core/aboutLogins.css
@@ -195,18 +195,16 @@ body {
 #loading-img-container{
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 #spinner {
   margin-top: 60px;
-  height: 60px;
-  width: 60px;
 }
 
 #empty-body {
   padding-left: 60px;
   padding-right: 60px;
 }
 
 #empty-obj-text-container {
deleted file mode 100644
--- a/mobile/android/themes/core/images/spinning_throbber.svg
+++ /dev/null
@@ -1,61 +0,0 @@
-<?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>
--- a/mobile/android/themes/core/jar.mn
+++ b/mobile/android/themes/core/jar.mn
@@ -24,32 +24,32 @@ chrome.jar:
   skin/aboutReaderContent.css               (aboutReaderContent.css)
   skin/aboutReaderControls.css              (aboutReaderControls.css)
   skin/aboutSupport.css                     (aboutSupport.css)
   skin/browser.css                          (browser.css)
 * skin/content.css                          (content.css)
   skin/config.css                           (config.css)
   skin/touchcontrols.css                    (touchcontrols.css)
   skin/netError.css                         (netError.css)
+  skin/spinner.css                          (spinner.css)
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 % override chrome://global/skin/aboutMemory.css chrome://browser/skin/aboutMemory.css
 % override chrome://global/skin/aboutReader.css chrome://browser/skin/aboutReader.css
 % override chrome://global/skin/aboutReaderContent.css chrome://browser/skin/aboutReaderContent.css
 % override chrome://global/skin/aboutReaderControls.css chrome://browser/skin/aboutReaderControls.css
 % override chrome://global/skin/aboutSupport.css chrome://browser/skin/aboutSupport.css
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css
 
 #ifdef MOZ_PAY
   skin/payment.css                         (payment.css)
 #endif
 #
 
 * skin/aboutLogins.css                      (aboutLogins.css)
-  skin/images/spinning_throbber.svg         (images/spinning_throbber.svg)
 
   skin/images/search.png                    (images/search.png)
   skin/images/lock.png                      (images/lock.png)
   skin/images/textfield.png                 (images/textfield.png)
 
   skin/images/5stars.png                    (images/5stars.png)
   skin/images/amo-logo.png                  (images/amo-logo.png)
   skin/images/arrowdown-16.png              (images/arrowdown-16.png)
new file mode 100644
--- /dev/null
+++ b/mobile/android/themes/core/spinner.css
@@ -0,0 +1,124 @@
+/* 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/. */
+
+.mui-refresh-main {
+  padding: 0;
+  overflow: hidden;
+  border-radius: 999px;
+  position: relative;
+}
+
+.mui-refresh-wrapper {
+  width: 60px;
+  height: 60px;
+}
+
+.mui-spinner-main {
+  width: 60px;
+  height: 60px;
+  position: relative;
+  animation: sporadic-rotate 5.25s cubic-bezier(.35, 0, .25, 1) infinite;
+}
+
+.mui-spinner-wrapper {
+  animation: outer-rotate 2.91667s linear infinite;
+}
+
+.mui-spinner-left, .mui-spinner-right {
+  position: absolute;
+  top: 0;
+  height: 60px;
+  width: 30px;
+  overflow: hidden;
+}
+
+.mui-spinner-left {
+  left: 0;
+}
+
+.mui-spinner-right {
+  right: 0;
+}
+
+.mui-half-circle-left, .mui-half-circle-right  {
+  position: absolute;
+  top: 0;
+  width: 60px;
+  height: 60px;
+  box-sizing: border-box;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #000 #000 transparent;
+  border-radius: 999px;
+  animation-iteration-count: infinite;
+  animation-duration: 1.3125s;
+  animation-timing-function: cubic-bezier(.35, 0, .25, 1);
+}
+
+.mui-half-circle-left {
+  left: 0;
+  border-right-color: transparent;
+  border-top-color: #FF9500; /*matched to fennec_ui_orange in java codebase*/
+  border-left-color: #FF9500; /*matched to fennec_ui_orange in java codebase*/
+  animation-name: left-wobble;
+}
+
+.mui-half-circle-right {
+  right: 0;
+  border-left-color: transparent;
+  border-top-color: #FF9500; /*matched to fennec_ui_orange in java codebase*/
+  border-right-color: #FF9500; /*matched to fennec_ui_orange in java codebase*/
+  animation-name: right-wobble;
+}
+
+@keyframes outer-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes left-wobble {
+  0%, 100% {
+    transform: rotate(130deg);
+  }
+  50% {
+    transform: rotate(-5deg);
+  }
+}
+
+@keyframes right-wobble {
+  0%, 100% {
+    transform: rotate(-130deg);
+  }
+  50% {
+    transform: rotate(5deg);
+  }
+}
+
+@keyframes sporadic-rotate {
+  12.5% {
+    transform: rotate(135deg);
+  }
+  25% {
+    transform: rotate(270deg);
+  }
+  37.5% {
+    transform: rotate(405deg);
+  }
+  50% {
+    transform: rotate(540deg);
+  }
+  62.5% {
+    transform: rotate(675deg);
+  }
+  75% {
+    transform: rotate(810deg);
+  }
+  87.5% {
+    transform: rotate(945deg);
+  }
+  100% {
+    transform: rotate(1080deg);
+  }
+}