Devtools: Provide affordance during network recording using a pulsing anim

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;
     padding: 0 2px;
 }
@@ skipping 305 matching lines @@
 
 .record-toolbar-item .glyph {
     -webkit-mask-position: -288px 0;
 }
 
 button.record-toolbar-item.toggled-on .glyph {
     -webkit-mask-position: -288px -24px;
     background-color: rgb(216, 0, 0) !important;
 }
 
+:host-context(.network) button.record-toolbar-item.toggled-on .glyph {
+    animation: pulse-effect 2.5s infinite alternate ease-in-out;
+}
+
+@keyframes pulse-effect {
+    from { transform: scale(0.8); }
+    to { transform: scale(1.1); }
+}
+
 .camera-toolbar-item .glyph {
     -webkit-mask-position: -96px -24px;
 }
 
 .last-step-toolbar-item .glyph {
     -webkit-mask-position: 0 -72px;
 }
 
 .first-step-toolbar-item .glyph {
     -webkit-mask-position: 0 -72px;
@@ skipping 150 matching lines @@
 }
 
 .playback-rate-button.toggled-on > .toolbar-button-text {
     color: rgb(66, 129, 235);
 }
 
 button.playback-rate-button {
     width: auto;
     margin-right: 10px;
 }