Consolidate rendering of gray segmented spinner.

BUG=chromium-os:21999 
TEST=Starting with a clean profile, launch ChromeOS and proceed through the steps of setting up a new login profile.  Expect spinners to be gray.


Review URL: http://codereview.chromium.org/8574017

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@110699 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/chromeos/login/login.html

@@ -5,6 +5,7 @@
 <link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="chrome://resources/css/select.css">
+<link rel="stylesheet" href="chrome://resources/css/spinner.css">
 <link rel="stylesheet" href="bubble.css">
 <link rel="stylesheet" href="header_bar.css">
 <link rel="stylesheet" href="network_dropdown.css">
@@ -12,7 +13,6 @@
 <link rel="stylesheet" href="screen_account_picker.css">
 <link rel="stylesheet" href="screen_gaia_signin.css">
 <link rel="stylesheet" href="screen_error_message.css">
-<link rel="stylesheet" href="spinner.css">
 <link rel="stylesheet" href="user_pod_row.css">
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/event_target.js"></script>

chrome/browser/resources/chromeos/login/oobe.html

@@ -5,6 +5,7 @@
 <link rel="stylesheet" href="chrome://resources/css/button.css">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="chrome://resources/css/select.css">
+<link rel="stylesheet" href="chrome://resources/css/spinner.css">
 <link rel="stylesheet" href="chrome://resources/css/throbber.css">
 <link rel="stylesheet" href="bubble.css">
 <link rel="stylesheet" href="header_bar.css">
@@ -13,7 +14,6 @@
 <link rel="stylesheet" href="screen_account_picker.css">
 <link rel="stylesheet" href="screen_gaia_signin.css">
 <link rel="stylesheet" href="screen_error_message.css">
-<link rel="stylesheet" href="spinner.css">
 <link rel="stylesheet" href="user_pod_row.css">
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/event_target.js"></script>

chrome/browser/resources/chromeos/login/spinner.css

-/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-@-webkit-keyframes spinner {
-  /* There are 13 animation steps, the numbers below space them evenly. Note
-   * that a steps(13) declaration produces off-by-one offsets for some frames,
-   * so for best results we specify positions explicity and use step-end. */
-  0%           { background-position: 286px 0px; }
-  7.6923076%   { background-position: 264px 0px; }
-  15.3846153%  { background-position: 242px 0px; }
-  23.0769230%  { background-position: 220px 0px; }
-  30.7692307%  { background-position: 198px 0px; }
-  38.4615384%  { background-position: 176px 0px; }
-  46.1538461%  { background-position: 154px 0px; }
-  53.8461538%  { background-position: 132px 0px; }
-  61.5384615%  { background-position: 110px 0px; }
-  69.2307692%  { background-position: 88px  0px; }
-  76.9230769%  { background-position: 66px  0px; }
-  84.6153846%  { background-position: 44px  0px; }
-  92.3076923%  { background-position: 22px  0px; }
-  100.0000000% { background-position: 0px   0px; }
-}
-
-.spinner {
-  -webkit-animation: spinner 1s step-end infinite;
-  background-image: url('chrome://theme/IDR_SPINNER');
-  height: 22px;
-  width: 22px;
-}

chrome/browser/resources/shared/css/spinner.css

@@ -11,6 +11,6 @@
 }
 
 .spinner {
-  height: 32px;
-  width: 32px;
+  height: 22px;
+  width: 22px;
 }

chrome/browser/resources/shared/images/spinner.svg

@@ -2,83 +2,82 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg viewBox="0 0 100 100" version="1.1"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g stroke-width="2" stroke-linecap="roun" fill="#000" stroke="#FFF"
-     transform="translate(50,50)">
+  <g stroke-opacity="0" transform="translate(50,50)">
     <animateTransform attributeName="transform" attributeType="XML"
       additive="sum" type="rotate"
       calcMode="discrete"  values="30;60;90;120;150;180;210;240;270;300;330;360"
       begin="0s" dur="1s" fill="freeze" repeatCount="indefinite" />
-    <path d="M50,0
-      a 50,50 0 0,0 -6.7,-25
-      l -17,10
-      a 50 50 0 0,1 4.02,15
-      l 20,0 z"
-      opacity = "1"/>
-    <path d="M43.3,-25
-      a 50,50 0 0,0 -18.3,-18.3
-      l -10,17
-      a 50 50 0 0,1 10.98,10.98
-      l 17.32,-10 z"
-      opacity = "0.79"/>
-    <path d="M25,-43.3
-      a 50,50 0 0,0 -25,-6.7
-      l 0,20
-      a 50 50 0 0,1 15,4.02
-      l 10,-17.32 z"
-      opacity = "0.62"/>
-    <path d="M0,-50
-      a 50,50 0 0,0 -25,6.7
-      l 10,17
-      a 50 50 0 0,1 15,-4.02
-      l 0,-20 z"
-      opacity = "0.48"/>
-    <path d="M-25,-43.3
-      a 50,50 0 0,0 -18.3,18.3
-      l 17,10
-      a 50 50 0 0,1 10.98,-10.98
-      l -10,-17.32 z"
-      opacity = "0.37"/>
-    <path d="M-43.3,-25
-      a 50,50 0 0,0 -6.7,25
-      l 20,0
-      a 50 50 0 0,1 4.02,-15
-      l -17.32,-10 z"
-      opacity = "0.28"/>
-    <path d="M-50,0
-      a 50,50 0 0,0 6.7,25
-      l 17,-10
-      a 50 50 0 0,1 -4.02,-15
-      l -20,0 z"
-      opacity = "0.21"/>
-    <path d="M-43.3,25
-      a 50,50 0 0,0 18.3,18.3
-      l 10,-17
-      a 50 50 0 0,1 -10.98,-10.98
-      l -17.32,10 z"
-      opacity = "0.17"/>
-    <path d="M-25,43.3
-      a 50,50 0 0,0 25,6.7
-      l 0,-20
-      a 50 50 0 0,1 -15,-4.02
-      l -10,17.32 z"
-      opacity = "0.13"/>
-    <path d="M0,50
-      a 50,50 0 0,0 25,-6.7
-      l -10,-17
-      a 50 50 0 0,1 -15,4.02
-      l 0,20 z"
-      opacity = "0.11"/>
-    <path d="M25,43.3
-      a 50,50 0 0,0 18.3,-18.3
-      l -17,-10
-      a 50 50 0 0,1 -10.98,10.98
-      l 10,17.32 z"
-      opacity = "0.1"/>
-    <path d="M43.3,25
-      a 50,50 0 0,0 6.7,-25
-      l -20,0
-      a 50 50 0 0,1 -4.02,15
-      l 17.32,10 z"
-      opacity = "0.1"/>
+    <path d="M49.931,-2.617
+      a 50,50 0 0,0 -5.381,-20.083
+      l -17.82,9.08
+      a 50 50 0 0,1 3.229,12.05
+      l 19.973,-1.047"
+      fill-opacity = "1"/>
+    <path d="M41.934,-27.232
+      a 50,50 0 0,0 -14.702,-14.702
+      l -10.893,16.773
+      a 50 50 0 0,1 8.821,8.821
+      l 16.773,-10.893"
+      fill-opacity = "0.793"/>
+    <path d="M22.7,-44.55
+      a 50,50 0 0,0 -20.083,-5.381
+      l -1.047,19.973
+      a 50 50 0 0,1 12.05,3.229
+      l 9.08,-17.82"
+      fill-opacity = "0.621"/>
+    <path d="M-2.617,-49.931
+      a 50,50 0 0,0 -20.083,5.381
+      l 9.08,17.82
+      a 50 50 0 0,1 12.05,-3.229
+      l -1.047,-19.973"
+      fill-opacity = "0.48"/>
+    <path d="M-27.232,-41.934
+      a 50,50 0 0,0 -14.702,14.702
+      l 16.773,10.893
+      a 50 50 0 0,1 8.821,-8.821
+      l -10.893,-16.773"
+      fill-opacity = "0.367"/>
+    <path d="M-44.55,-22.7
+      a 50,50 0 0,0 -5.381,20.083
+      l 19.973,1.047
+      a 50 50 0 0,1 3.229,-12.05
+      l -17.82,-9.08"
+      fill-opacity = "0.279"/>
+    <path d="M-49.931,2.617
+      a 50,50 0 0,0 5.381,20.083
+      l 17.82,-9.08
+      a 50 50 0 0,1 -3.229,-12.05
+      l -19.973,1.047"
+      fill-opacity = "0.213"/>
+    <path d="M-41.934,27.232
+      a 50,50 0 0,0 14.702,14.702
+      l 10.893,-16.773
+      a 50 50 0 0,1 -8.821,-8.821
+      l -16.773,10.893"
+      fill-opacity = "0.165"/>
+    <path d="M-22.7,44.55
+      a 50,50 0 0,0 20.083,5.381
+      l 1.047,-19.973
+      a 50 50 0 0,1 -12.05,-3.229
+      l -9.08,17.82"
+      fill-opacity = "0.133"/>
+    <path d="M2.617,49.931
+      a 50,50 0 0,0 20.083,-5.381
+      l -9.08,-17.82
+      a 50 50 0 0,1 -12.05,3.229
+      l 1.047,19.973"
+      fill-opacity = "0.114"/>
+    <path d="M27.232,41.934
+      a 50,50 0 0,0 14.702,-14.702
+      l -16.773,-10.893
+      a 50 50 0 0,1 -8.821,8.821
+      l 10.893,16.773"
+      fill-opacity = "0.104"/>
+    <path d="M44.55,22.7
+      a 50,50 0 0,0 5.381,-20.083
+      l -19.973,-1.047
+      a 50 50 0 0,1 -3.229,12.05
+      l 17.82,9.08"
+      fill-opacity = "0.101"/>
   </g>
 </svg>