Bug 1257953 - Update Reader Mode Icons and Add an Active State for Narrate. r=Gijs draft
authorStephen Horlander <shorlander@mozilla.com>
Fri, 15 Apr 2016 11:59:08 -0700
changeset 356940 b42e46bc6b8cac5230f37aed1f02aa6ad805d170
parent 354226 f05a1242fb29023bd7ebc492897ed3d6907733c7
child 356941 fc1dbc87de9b99f590a8e8c144928b61da198faa
push id16652
push userbmo:eitan@monotonous.org
push dateWed, 27 Apr 2016 17:14:42 +0000
reviewersGijs
bugs1257953
milestone48.0a1
Bug 1257953 - Update Reader Mode Icons and Add an Active State for Narrate. r=Gijs MozReview-Commit-ID: Ygt97q065L
toolkit/themes/shared/jar.inc.mn
toolkit/themes/shared/narrate/narrate-active.svg
toolkit/themes/shared/narrate/narrate.svg
toolkit/themes/shared/reader/RM-Close-24x24.svg
toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -23,21 +23,22 @@ toolkit.jar:
   skin/classic/global/config.css                           (../../shared/config.css)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/loading-inverted.png           (../../shared/icons/loading-inverted.png)
   skin/classic/global/icons/loading-inverted@2x.png        (../../shared/icons/loading-inverted@2x.png)
   skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
   skin/classic/global/alerts/alert-common.css              (../../shared/alert-common.css)
   skin/classic/global/narrate.css                          (../../shared/narrate.css)
   skin/classic/global/narrateControls.css                  (../../shared/narrateControls.css)
-  skin/classic/global/narrate/arrow.svg                     (../../shared/narrate/arrow.svg)
+  skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
   skin/classic/global/narrate/back.svg                     (../../shared/narrate/back.svg)
   skin/classic/global/narrate/fast.svg                     (../../shared/narrate/fast.svg)
   skin/classic/global/narrate/forward.svg                  (../../shared/narrate/forward.svg)
   skin/classic/global/narrate/narrate.svg                  (../../shared/narrate/narrate.svg)
+  skin/classic/global/narrate/narrate-active.svg           (../../shared/narrate/narrate-active.svg)
   skin/classic/global/narrate/slow.svg                     (../../shared/narrate/slow.svg)
   skin/classic/global/narrate/start.svg                    (../../shared/narrate/start.svg)
   skin/classic/global/narrate/stop.svg                     (../../shared/narrate/stop.svg)
   skin/classic/global/menu/shared-menu-check@2x.png        (../../shared/menu-check@2x.png)
   skin/classic/global/menu/shared-menu-check.png           (../../shared/menu-check.png)
   skin/classic/global/menu/shared-menu-check-active.svg    (../../shared/menu-check-active.svg)
   skin/classic/global/menu/shared-menu-check-black.svg     (../../shared/menu-check-black.svg)
   skin/classic/global/menu/shared-menu-check-hover.svg     (../../shared/menu-check-hover.svg)
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/narrate/narrate-active.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0"?>
+<!-- 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <style>
+    @keyframes grow {
+      0%   { transform: scaleY(1);   }
+      15%  { transform: scaleY(1.5); }
+      15%  { transform: scaleY(1.5); }
+      30%  { transform: scaleY(1);   }
+      100% { transform: scaleY(1);   }
+    }
+
+    @keyframes shrink {
+      0%   { transform: scaleY(1);   }
+      15%  { transform: scaleY(.5); }
+      15%  { transform: scaleY(.5); }
+      30%  { transform: scaleY(1);   }
+      100% { transform: scaleY(1);   }
+    }
+
+    .barAnimation {
+      transform-box: fill-box;
+      transform-origin: 50% 50%;
+      animation-name: grow;
+      animation-duration: 1750ms;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
+
+    .barAnimation01 { animation-delay: 0; }
+    .barAnimation02 { animation-delay: 250ms; }
+    .barAnimation03 { animation-delay: 500ms; }
+    .barAnimation04 { animation-delay: 750ms; }
+    .barAnimation05 { animation-delay: 1000ms; }
+    .barAnimation06 { animation-delay: 1250ms; }
+    .barAnimation07 { animation-delay: 1500ms; }
+  </style>
+
+  <g id="glyph-waveform" fill="#58bf43">
+    <rect x="1"  y="8" width="2" height="8"  rx=".5" ry=".5" class="barAnimation barAnimation01" />
+    <rect x="4"  y="5" width="2" height="14" rx=".5" ry=".5" class="barAnimation barAnimation02" />
+    <rect x="7"  y="8" width="2" height="8"  rx=".5" ry=".5" class="barAnimation barAnimation03" />
+    <rect x="10" y="4" width="2" height="16" rx=".5" ry=".5" class="barAnimation barAnimation04" />
+    <rect x="13" y="2" width="2" height="20" rx=".5" ry=".5" class="barAnimation barAnimation05" />
+    <rect x="16" y="4" width="2" height="16" rx=".5" ry=".5" class="barAnimation barAnimation06" />
+    <rect x="19" y="7" width="2" height="10" rx=".5" ry=".5" class="barAnimation barAnimation07" />
+  </g>
+
+</svg>
--- a/toolkit/themes/shared/narrate/narrate.svg
+++ b/toolkit/themes/shared/narrate/narrate.svg
@@ -1,3 +1,16 @@
-<svg id="Icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 18.77">
-    <path fill="gray" d="M3.13 13.72a1.57 1.57 0 0 1-3.13 0V5.41a1.57 1.57 0 0 1 3.13 0v8.31zm6.29 3.62a1.57 1.57 0 0 1-3.13 0V1.44a1.57 1.57 0 0 1 3.13 0v15.9zm6.29-2.9a1.57 1.57 0 0 1-3.13 0V4.83a1.57 1.57 0 0 1 3.13 0v9.61zM22 12.62a1.57 1.57 0 0 1-3.13 0V6.15a1.57 1.57 0 0 1 3.13 0v6.47z"/>
+<?xml version="1.0"?>
+<!-- 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <g id="glyph-waveform" fill="#808080">
+    <rect x="1"  y="8" width="2" height="8"  rx=".5" ry=".5" />
+    <rect x="4"  y="5" width="2" height="14" rx=".5" ry=".5" />
+    <rect x="7"  y="8" width="2" height="8"  rx=".5" ry=".5" />
+    <rect x="10" y="4" width="2" height="16" rx=".5" ry=".5" />
+    <rect x="13" y="2" width="2" height="20" rx=".5" ry=".5" />
+    <rect x="16" y="4" width="2" height="16" rx=".5" ry=".5" />
+    <rect x="19" y="7" width="2" height="10" rx=".5" ry=".5" />
+  </g>
+
 </svg>
--- a/toolkit/themes/shared/reader/RM-Close-24x24.svg
+++ b/toolkit/themes/shared/reader/RM-Close-24x24.svg
@@ -1,25 +1,23 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
   <defs>
     <style>
       use:not(:target) {
         display: none;
       }
       #close {
         fill: #808080;
       }
       #close-hover {
         fill: #fff;
       }
     </style>
-    <g id="close-shape">
-      <polygon points="20.477,6.551 20.477,17.449 11.992,17.449 11.992,20 23,20 23,4 11.992,4 11.992,6.551"/>
-      <polygon points="1,11.981 9.698,19.95 9.698,15.13 18.184,15.13 18.184,8.87 9.698,8.87 9.698,4.011"/>
-    </g>
+
+    <path id="close-shape" d="M19,22H6a2,2,0,0,1-2-2V18l2,2H18a1,1,0,0,0,1-1V5a1,1,0,0,0-1-1H6L4,6V4A2,2,0,0,1,6,2H19a2,2,0,0,1,2,2V20A2,2,0,0,1,19,22Zm-6-9H5.4l4.2,4.154L8.186,18.631,1.567,12.017,8.021,5.411,9.5,6.95,5.424,11H13v2Z"/>
   </defs>
   <use id="close" xlink:href="#close-shape"/>
   <use id="close-hover" xlink:href="#close-shape"/>
 </svg>
--- a/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
+++ b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="#808080" d="M8.23,18.748v-1.016l1.182-0.146c0.065-0.013,0.12-0.055,0.166-0.127s0.052-0.143,0.02-0.215L8.513,14.07 H4.236l-1.104,3.096c-0.039,0.104-0.02,0.199,0.059,0.283s0.153,0.13,0.225,0.137l1.123,0.146v1.016H0.232v-1.016l1.123-0.166 L5.837,5.008h2.275l4.443,12.197c0.052,0.124,0.103,0.21,0.151,0.259s0.145,0.089,0.288,0.122l0.762,0.146v1.016H8.23z M6.296,8.084l-1.68,4.805h3.398L6.296,8.084z"/>
-    <path fill="#808080" d="M20.05,18.748l-0.264-0.996c-0.345,0.234-0.706,0.443-1.083,0.625c-0.331,0.156-0.702,0.298-1.112,0.425 c-0.409,0.127-0.835,0.19-1.277,0.19c-0.364,0-0.704-0.06-1.02-0.181s-0.592-0.293-0.829-0.518s-0.424-0.497-0.561-0.815 S13.7,16.801,13.7,16.404c0-0.299,0.024-0.576,0.073-0.83s0.146-0.49,0.293-0.708s0.356-0.426,0.63-0.625s0.637-0.392,1.089-0.581 s1.008-0.377,1.665-0.566s1.445-0.384,2.363-0.586v-0.244c0-0.098,0.003-0.186,0.01-0.264c0-0.091,0.003-0.182,0.01-0.273 c0.007-0.189-0.013-0.392-0.059-0.61s-0.137-0.42-0.273-0.605s-0.329-0.338-0.576-0.459s-0.569-0.181-0.967-0.181 c-0.137,0-0.259,0.003-0.366,0.01s-0.197,0.016-0.269,0.029c-0.085,0.013-0.159,0.026-0.225,0.039v1.895h-2.061 c-0.169,0.013-0.319-0.003-0.449-0.049c-0.11-0.039-0.213-0.107-0.308-0.205s-0.142-0.25-0.142-0.459 c0-0.371,0.132-0.703,0.396-0.996c0.263-0.293,0.607-0.542,1.033-0.747s0.904-0.363,1.435-0.474 c0.529-0.111,1.058-0.166,1.585-0.166c0.572,0,1.096,0.042,1.57,0.127s0.883,0.249,1.224,0.493c0.342,0.244,0.604,0.587,0.79,1.03 s0.278,1.025,0.278,1.748v5.137c0,0.124,0.042,0.229,0.127,0.317s0.188,0.138,0.312,0.151l0.879,0.059v0.938H20.05z M19.793,13.592 c-0.645,0.13-1.177,0.264-1.597,0.4s-0.754,0.293-1.001,0.469s-0.42,0.376-0.518,0.601s-0.146,0.487-0.146,0.786 c0,0.208,0.034,0.402,0.103,0.581s0.166,0.335,0.293,0.469s0.278,0.239,0.454,0.317s0.368,0.117,0.576,0.117 c0.215,0,0.432-0.023,0.649-0.068s0.415-0.094,0.591-0.146c0.208-0.065,0.407-0.14,0.596-0.225V13.592z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#737373" d="M10.87,18.989h2.144L8.3,3.991H5.724l-4.739,15H3.044l1.115-4.171h5.6ZM4.652,12.91L6.968,5.69l2.294,7.22H4.652ZM22.1,16.515v-5.06c0-2.31-.984-3.713-3.65-3.713a10.236,10.236,0,0,0-3.7.756L15.116,9.9A9.9,9.9,0,0,1,18.1,9.317c1.533,0,1.958.627,1.958,2.223v0.975h-1.35c-3.086,0-4.871,1.125-4.871,3.5a3.217,3.217,0,0,0,3.527,3.338,3.205,3.205,0,0,0,2.945-1.659,2.573,2.573,0,0,0,2.436,1.659l0.441-1.344A1.408,1.408,0,0,1,22.1,16.515ZM17.8,17.9a1.744,1.744,0,0,1-1.911-1.995c0-1.512,1.029-2.111,3.065-2.111h1.1V16.18C19.426,17.334,18.938,17.9,17.8,17.9Z"/>
 </svg>