Devtools: Resize glpyhs and add animation icons

Source/devtools/front_end/ui/toolbar.css

 /*
  * Copyright (c) 2014 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.
  */
 
 :host {
     flex: none;
 }
 
@@ skipping 68 matching lines @@
 .toolbar-item .toolbar-button-text {
     font-weight: bold;
     color: rgba(0, 0, 0, 0.75);
     opacity: 0.8;
 }
 
 .long-click-glyph {
     background-color: rgba(0, 0, 0, 0.75);
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
     -webkit-mask-position: -288px -48px;
-    -webkit-mask-size: 320px 144px;
+    -webkit-mask-size: 352px 144px;
     z-index: 1;
     width: 32px;
     height: 24px;
 }
 
 .narrow .long-click-glyph {
     top: -2px;
     left: -7px;
 }
 
@@ skipping 52 matching lines @@
 }
 
 .toolbar-select-container {
     display: inline-flex;
     flex-shrink: 0;
     margin-right: 6px;
 }
 
 .toolbar-select-arrow {
     background-image: url(Images/toolbarButtonGlyphs.png);
-    background-size: 320px 144px;
+    background-size: 352px 144px;
     opacity: 0.7;
     width: 12px;
     height: 12px;
     background-position: -18px -96px;
     display: inline-block;
     pointer-events: none;
     margin: auto 0;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
@@ skipping 30 matching lines @@
 }
 
 .toolbar-item.checkbox {
     margin: auto 6px auto 0;
     height: auto;
     display: flex;
 }
 
 .toolbar-item > .glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
-    -webkit-mask-size: 320px 144px;
+    -webkit-mask-size: 352px 144px;
     background-color: rgba(0, 0, 0, 0.75);
     opacity: 0.8;
     z-index: 1;
     width: 32px;
     height: 24px;
 }
 
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .toolbar-item > .glyph {
@@ skipping 68 matching lines @@
 .node-search-toolbar-item .glyph {
     -webkit-mask-position: -224px -24px;
 }
 
 .emulation-toolbar-item .glyph {
     -webkit-mask-position: -160px 0;
 }
 
 .emulation-toolbar-item.warning::after {
     background-image: url(Images/toolbarButtonGlyphs.png);
-    background-size: 320px 144px;
+    background-size: 352px 144px;
     width: 15px;
     height: 11px;
     content: "";
     position: relative;
     top: 4px;
     background-position: -202px -107px;
     z-index: 1;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
@@ skipping 161 matching lines @@
 }
 
 .eyedropper-toolbar-item .glyph {
     -webkit-mask-position: -288px -120px;
 }
 
 .add-toolbar-item .glyph {
     -webkit-mask-position: -224px -120px;
 }
 
-.replay-toolbar-item .glyph {
-    -webkit-mask-position: -192px -24px;
+.pause-outline-toolbar-item .glyph {
+    -webkit-mask-position: -320px 0px;
+}
+
+.replay-outline-toolbar-item .glyph {
+    -webkit-mask-position: -320px -24px;
+}
+
+.play-outline-toolbar-item .glyph {
+    -webkit-mask-position: -320px -48px;
 }
 
 .case-sensitive-search-toolbar-item.toggled-on .toolbar-button-text {
     color: rgb(94, 146, 233);
 }
 
 .regex-search-toolbar-item.toggled-on {
     color: rgb(66, 129, 235);
 }
 
 .regex-search-toolbar-item.toggled-on .toolbar-button-text {
     color: rgb(94, 146, 233);
 }
 
 .playback-rate-button.toggled-on > .toolbar-button-text {
     color: rgb(66, 129, 235);
 }
 
 button.playback-rate-button {
     width: auto;
     margin-right: 10px;
 }