chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/Images/src/performance-panel-diagram.svg

@@ -1,29 +1,34 @@
 <svg width="186" height="50" viewBox="0 0 186 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" width="81" height="16" fill="#FFE07C"/>
-<rect x="82.5" width="42" height="16" fill="#FFE07C"/>
-<rect x="42.5" y="17" width="10" height="16" fill="#D9BAFD"/>
-<rect x="53.5" y="17" width="84" height="16" fill="#D9BAFD"/>
-<rect x="138.5" y="17" width="39" height="16" fill="#D9BAFD"/>
-<rect x="56.5" y="34" width="74" height="16" fill="#80DA88"/>
-<rect x="131.5" y="34" width="54" height="16" fill="#80DA88"/>
+<rect x="0.5" width="81" height="16" fill="#FACC15"/>
+<rect x="82.5" width="42" height="16" fill="#FACC15"/>
+<rect x="42.5" y="17" width="10" height="16" fill="#D190FF"/>
+<rect x="53.5" y="17" width="84" height="16" fill="#D190FF"/>
+<rect x="138.5" y="17" width="39" height="16" fill="#D190FF"/>
+<rect x="56.5" y="34" width="74" height="16" fill="#37BE5F"/>
+<rect x="131.5" y="34" width="54" height="16" fill="#37BE5F"/>
 <rect x="1.5" y="1" width="79" height="14" stroke="#1F1F1F" stroke-width="2"/>
 <rect x="132.5" y="35" width="52" height="14" stroke="#1F1F1F" stroke-width="2"/>
-<g filter="url(#filter0_d_4690_314721)">
+<g filter="url(#filter0_dd_4690_314721)">
 <path d="M78.7261 6.95605L128.208 39.0898" stroke="#1F1F1F" stroke-width="2" stroke-linecap="round"/>
 <circle cx="80.4031" cy="8.04544" r="2" transform="rotate(33 80.4031 8.04544)" fill="white" stroke="#1F1F1F" stroke-width="2"/>
 <circle cx="132.401" cy="41.813" r="2" transform="rotate(33 132.401 41.813)" fill="white" stroke="#1F1F1F" stroke-width="2"/>
 <path d="M129.239 40.749C129.949 40.7371 130.42 40.0107 130.143 39.3578L127.213 32.4675C126.899 31.7305 125.89 31.6425 125.454 32.3142L120.897 39.3304C120.461 40.002 120.952 40.8883 121.753 40.8749L129.239 40.749Z" fill="#1F1F1F"/>
 </g>
 <defs>
-<filter id="filter0_d_4690_314721" x="73.0747" y="-0.458984" width="63.3262" height="48.2744" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_dd_4690_314721" x="70.0747" y="-2.45898" width="69.3262" height="54.2744" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="0.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_4690_314721"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4690_314721"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4690_314721" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_4690_314721" result="effect2_dropShadow_4690_314721"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_4690_314721" result="shape"/>
 </filter>
 </defs>
 </svg>

package/front_end/Images/src/performance-panel-entry-label.svg

@@ -5,8 +5,8 @@
 <rect x="163.5" y="38" width="2" height="8" fill="#E1E3E1"/>
 <g clip-path="url(#clip1_4690_314478)">
 <rect width="68" height="16" transform="translate(45.5 34)" fill="white"/>
-<rect opacity="0.4" x="45.5" y="34" width="68" height="16" fill="#80DA88"/>
-<rect x="51.5" y="34" width="62" height="16" fill="#80DA88"/>
+<rect opacity="0.4" x="45.5" y="34" width="68" height="16" fill="#37BE5F"/>
+<rect x="51.5" y="34" width="62" height="16" fill="#37BE5F"/>
 </g>
 </g>
 <rect x="22.5" y="59" width="167" height="2" fill="#E1E3E1"/>
@@ -14,24 +14,24 @@
 <rect x="189.5" y="56" width="2" height="8" fill="#E1E3E1"/>
 <g clip-path="url(#clip2_4690_314478)">
 <rect width="83" height="16" transform="translate(71.5 52)" fill="white"/>
-<rect opacity="0.4" x="71.5" y="52" width="83" height="16" fill="#FFE07C"/>
-<rect x="77.5" y="52" width="77" height="16" fill="#FFE07C"/>
+<rect opacity="0.4" x="71.5" y="52" width="83" height="16" fill="#FACC15"/>
+<rect x="77.5" y="52" width="77" height="16" fill="#FACC15"/>
 </g>
 <rect x="82.5" y="77" width="104" height="2" fill="#E1E3E1"/>
 <rect x="80.5" y="74" width="2" height="8" fill="#E1E3E1"/>
 <rect x="186.5" y="74" width="2" height="8" fill="#E1E3E1"/>
 <g clip-path="url(#clip3_4690_314478)">
 <rect width="44" height="16" transform="translate(102.5 70)" fill="white"/>
-<rect opacity="0.4" x="102.5" y="70" width="44" height="16" fill="#80DA88"/>
-<rect x="113.5" y="70" width="33" height="16" fill="#80DA88"/>
+<rect opacity="0.4" x="102.5" y="70" width="44" height="16" fill="#37BE5F"/>
+<rect x="113.5" y="70" width="33" height="16" fill="#37BE5F"/>
 </g>
 <rect x="2.5" y="23" width="150" height="2" fill="#E1E3E1"/>
 <rect x="0.5" y="20" width="2" height="8" fill="#E1E3E1"/>
 <rect x="152.5" y="20" width="2" height="8" fill="#E1E3E1"/>
 <g clip-path="url(#clip4_4690_314478)">
 <rect width="142" height="16" transform="translate(10.5 16)" fill="white"/>
-<rect opacity="0.4" x="10.5" y="16" width="142" height="16" fill="#D9BAFD"/>
-<rect x="14.5" y="16" width="138" height="16" fill="#D9BAFD"/>
+<rect opacity="0.4" x="10.5" y="16" width="142" height="16" fill="#D190FF"/>
+<rect x="14.5" y="16" width="138" height="16" fill="#D190FF"/>
 </g>
 <rect x="34.5" y="35" width="130" height="14" stroke="#1F1F1F" stroke-width="2"/>
 <g filter="url(#filter0_dd_4690_314478)">
@@ -39,16 +39,9 @@
 <path d="M79.042 18.667V20H72.8896V10.1357H74.4209V18.667H79.042ZM82.8701 20.123C81.4346 20.123 80.3887 19.2617 80.3887 17.9082C80.3887 16.5752 81.3867 15.8027 83.1572 15.6934L85.1738 15.5703V14.9209C85.1738 14.1074 84.6543 13.6494 83.6494 13.6494C82.8291 13.6494 82.2617 13.957 82.0977 14.4971H80.6758C80.8262 13.2461 82.0293 12.4326 83.7178 12.4326C85.584 12.4326 86.6367 13.3623 86.6367 14.9209V20H85.2217V18.9473H85.1055C84.6611 19.6992 83.8477 20.123 82.8701 20.123ZM83.2461 18.9404C84.3535 18.9404 85.1738 18.2158 85.1738 17.2588V16.6162L83.3555 16.7393C82.3301 16.8076 81.8652 17.1699 81.8652 17.8467C81.8652 18.5371 82.4463 18.9404 83.2461 18.9404ZM92.6729 20.123C91.6338 20.123 90.7656 19.6445 90.3213 18.8242H90.2119V20H88.7969V9.66406H90.2666V13.752H90.3828C90.7793 12.9453 91.6543 12.4463 92.6729 12.4463C94.5596 12.4463 95.749 13.9297 95.749 16.2881C95.749 18.626 94.5527 20.123 92.6729 20.123ZM92.249 13.7041C91.0186 13.7041 90.2461 14.6953 90.2393 16.2881C90.2461 17.8809 91.0117 18.8652 92.249 18.8652C93.4932 18.8652 94.2383 17.8945 94.2383 16.2881C94.2383 14.6816 93.4932 13.7041 92.249 13.7041ZM102.4 18.0107H103.815C103.494 19.3232 102.291 20.1436 100.589 20.1436C98.4561 20.1436 97.1504 18.6738 97.1504 16.3018C97.1504 13.9434 98.4834 12.4326 100.582 12.4326C102.653 12.4326 103.904 13.8477 103.904 16.1719V16.6777H98.6475V16.7461C98.6953 18.0928 99.4541 18.9404 100.63 18.9404C101.519 18.9404 102.127 18.6123 102.4 18.0107ZM100.575 13.6289C99.4883 13.6289 98.7295 14.4219 98.6475 15.6182H102.407C102.373 14.415 101.662 13.6289 100.575 13.6289ZM105.736 20V9.66406H107.206V20H105.736Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M100.95 35.1415L96.0001 30.1917L92.5 26.606L89.6361 26.6562L99.5356 36.5557L100.95 35.1415Z" fill="#1F1F1F"/>
 <circle cx="3" cy="3" r="3" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 103.778 35.1416)" fill="#1F1F1F"/>
-<rect x="47.5" y="8.70996" width="12" height="12" rx="6" fill="white"/>
-<mask id="mask0_4690_314478" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="45" y="6" width="17" height="17">
-<rect x="45.5" y="6.70996" width="16" height="16" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask0_4690_314478)">
-<path d="M49.4002 18.1096C49.9668 17.6763 50.6002 17.3346 51.3002 17.0846C52.0002 16.8346 52.7335 16.7096 53.5002 16.7096C54.2668 16.7096 55.0002 16.8346 55.7002 17.0846C56.4002 17.3346 57.0335 17.6763 57.6002 18.1096C57.9891 17.6541 58.2918 17.1374 58.5085 16.5596C58.7252 15.9819 58.8335 15.3652 58.8335 14.7096C58.8335 13.2319 58.3141 11.9735 57.2752 10.9346C56.2363 9.89575 54.9779 9.3763 53.5002 9.3763C52.0224 9.3763 50.7641 9.89575 49.7252 10.9346C48.6863 11.9735 48.1668 13.2319 48.1668 14.7096C48.1668 15.3652 48.2752 15.9819 48.4918 16.5596C48.7085 17.1374 49.0113 17.6541 49.4002 18.1096ZM53.5002 15.3763C52.8446 15.3763 52.2918 15.1513 51.8418 14.7013C51.3918 14.2513 51.1668 13.6985 51.1668 13.043C51.1668 12.3874 51.3918 11.8346 51.8418 11.3846C52.2918 10.9346 52.8446 10.7096 53.5002 10.7096C54.1557 10.7096 54.7085 10.9346 55.1585 11.3846C55.6085 11.8346 55.8335 12.3874 55.8335 13.043C55.8335 13.6985 55.6085 14.2513 55.1585 14.7013C54.7085 15.1513 54.1557 15.3763 53.5002 15.3763ZM53.5002 21.3763C52.5779 21.3763 51.7113 21.2013 50.9002 20.8513C50.0891 20.5013 49.3835 20.0263 48.7835 19.4263C48.1835 18.8263 47.7085 18.1207 47.3585 17.3096C47.0085 16.4985 46.8335 15.6319 46.8335 14.7096C46.8335 13.7874 47.0085 12.9207 47.3585 12.1096C47.7085 11.2985 48.1835 10.593 48.7835 9.99297C49.3835 9.39297 50.0891 8.91797 50.9002 8.56797C51.7113 8.21797 52.5779 8.04297 53.5002 8.04297C54.4224 8.04297 55.2891 8.21797 56.1002 8.56797C56.9113 8.91797 57.6168 9.39297 58.2168 9.99297C58.8168 10.593 59.2918 11.2985 59.6418 12.1096C59.9918 12.9207 60.1668 13.7874 60.1668 14.7096C60.1668 15.6319 59.9918 16.4985 59.6418 17.3096C59.2918 18.1207 58.8168 18.8263 58.2168 19.4263C57.6168 20.0263 56.9113 20.5013 56.1002 20.8513C55.2891 21.2013 54.4224 21.3763 53.5002 21.3763ZM53.5002 20.043C54.0891 20.043 54.6446 19.9569 55.1668 19.7846C55.6891 19.6124 56.1668 19.3652 56.6002 19.043C56.1668 18.7207 55.6891 18.4735 55.1668 18.3013C54.6446 18.1291 54.0891 18.043 53.5002 18.043C52.9113 18.043 52.3557 18.1291 51.8335 18.3013C51.3113 18.4735 50.8335 18.7207 50.4002 19.043C50.8335 19.3652 51.3113 19.6124 51.8335 19.7846C52.3557 19.9569 52.9113 20.043 53.5002 20.043ZM53.5002 14.043C53.7891 14.043 54.0279 13.9485 54.2168 13.7596C54.4057 13.5707 54.5002 13.3319 54.5002 13.043C54.5002 12.7541 54.4057 12.5152 54.2168 12.3263C54.0279 12.1374 53.7891 12.043 53.5002 12.043C53.2113 12.043 52.9724 12.1374 52.7835 12.3263C52.5946 12.5152 52.5002 12.7541 52.5002 13.043C52.5002 13.3319 52.5946 13.5707 52.7835 13.7596C52.9724 13.9485 53.2113 14.043 53.5002 14.043Z" fill="#1F1F1F"/>
-</g>
 </g>
 <defs>
-<filter id="filter0_dd_4690_314478" x="41.5" y="0" width="96" height="47.2129" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_dd_4690_314478" x="61.5" y="0" width="76" height="47.2129" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_4690_314478"/>

package/front_end/Images/src/performance-panel-time-range.svg

@@ -4,14 +4,8 @@
 </mask>
 <path d="M0 0H160V66H0V0Z" fill="url(#paint0_linear_4690_314791)" fill-opacity="0.15"/>
 <path d="M160 66V70H161V66H160ZM0 66H-1V70H0V66ZM159 0V66H161V0H159ZM160 62H0V70H160V62ZM1 66V0H-1V66H1Z" fill="#FF4896" mask="url(#path-1-inside-1_4690_314791)"/>
-<path d="M69.042 33.667V35H62.8896V25.1357H64.4209V33.667H69.042ZM72.8701 35.123C71.4346 35.123 70.3887 34.2617 70.3887 32.9082C70.3887 31.5752 71.3867 30.8027 73.1572 30.6934L75.1738 30.5703V29.9209C75.1738 29.1074 74.6543 28.6494 73.6494 28.6494C72.8291 28.6494 72.2617 28.957 72.0977 29.4971H70.6758C70.8262 28.2461 72.0293 27.4326 73.7178 27.4326C75.584 27.4326 76.6367 28.3623 76.6367 29.9209V35H75.2217V33.9473H75.1055C74.6611 34.6992 73.8477 35.123 72.8701 35.123ZM73.2461 33.9404C74.3535 33.9404 75.1738 33.2158 75.1738 32.2588V31.6162L73.3555 31.7393C72.3301 31.8076 71.8652 32.1699 71.8652 32.8467C71.8652 33.5371 72.4463 33.9404 73.2461 33.9404ZM82.6729 35.123C81.6338 35.123 80.7656 34.6445 80.3213 33.8242H80.2119V35H78.7969V24.6641H80.2666V28.752H80.3828C80.7793 27.9453 81.6543 27.4463 82.6729 27.4463C84.5596 27.4463 85.749 28.9297 85.749 31.2881C85.749 33.626 84.5527 35.123 82.6729 35.123ZM82.249 28.7041C81.0186 28.7041 80.2461 29.6953 80.2393 31.2881C80.2461 32.8809 81.0117 33.8652 82.249 33.8652C83.4932 33.8652 84.2383 32.8945 84.2383 31.2881C84.2383 29.6816 83.4932 28.7041 82.249 28.7041ZM92.4004 33.0107H93.8154C93.4941 34.3232 92.291 35.1436 90.5889 35.1436C88.4561 35.1436 87.1504 33.6738 87.1504 31.3018C87.1504 28.9434 88.4834 27.4326 90.582 27.4326C92.6533 27.4326 93.9043 28.8477 93.9043 31.1719V31.6777H88.6475V31.7461C88.6953 33.0928 89.4541 33.9404 90.6299 33.9404C91.5186 33.9404 92.127 33.6123 92.4004 33.0107ZM90.5752 28.6289C89.4883 28.6289 88.7295 29.4219 88.6475 30.6182H92.4072C92.373 29.415 91.6621 28.6289 90.5752 28.6289ZM95.7363 35V24.6641H97.2061V35H95.7363Z" fill="#FF4896"/>
-<path d="M70.8047 54V52.3184H66.6797V51.2051C67.793 49.2949 69.0352 47.2969 70.2012 45.5449H72.0703V51.2051H73.2363V52.3184H72.0703V54H70.8047ZM67.9395 51.1465V51.2285H70.8223V46.6523H70.7461C69.8379 48.0176 68.8066 49.6641 67.9395 51.1465ZM75.4746 54.0879C74.9824 54.0879 74.6133 53.7188 74.6133 53.2441C74.6133 52.7695 74.9824 52.4004 75.4746 52.4004C75.9727 52.4004 76.3359 52.7695 76.3359 53.2441C76.3359 53.7188 75.9727 54.0879 75.4746 54.0879ZM78.0117 47.9941C78.0117 46.4414 79.2129 45.3398 80.918 45.3398C82.5059 45.3398 83.6484 46.3535 83.6484 47.7422C83.6484 48.7207 83.2207 49.418 81.7383 50.9062L79.875 52.7812V52.8809H83.7773V54H78.082V53.1094L80.9766 50.0977C82.0488 48.9785 82.3301 48.5566 82.3301 47.8711C82.3301 47.0508 81.7734 46.4238 80.8359 46.4238C79.8809 46.4238 79.2539 47.0566 79.2539 47.9941H78.0117ZM88.4531 54.2051C86.7715 54.2051 85.5879 53.1797 85.5059 51.709H86.7598C86.8535 52.5527 87.5391 53.1094 88.459 53.1094C89.4844 53.1094 90.1758 52.3711 90.1758 51.2695C90.1758 50.2031 89.4902 49.4883 88.4941 49.4883C87.7441 49.4883 87.1523 49.8398 86.8418 50.4258H85.6406L86.1152 45.5449H91.0195V46.6582H87.1348L86.8887 49.2539H86.9883C87.375 48.7324 88.002 48.457 88.8574 48.457C90.2871 48.457 91.459 49.5586 91.459 51.2461C91.459 53.0039 90.2461 54.2051 88.4531 54.2051ZM96.252 49.418C96.252 48.3105 97.2891 47.5137 98.7305 47.5137C100.166 47.5137 101.104 48.1816 101.227 49.2832H100.02C99.9023 48.8086 99.4453 48.498 98.7305 48.498C98.0273 48.498 97.4941 48.8438 97.4941 49.3594C97.4941 49.752 97.8164 49.998 98.5078 50.1621L99.5684 50.4082C100.781 50.6895 101.35 51.2109 101.35 52.1367C101.35 53.3203 100.23 54.123 98.707 54.123C97.1895 54.123 96.1992 53.4375 96.0879 52.3301H97.3477C97.5059 52.8281 97.9746 53.1387 98.7363 53.1387C99.5215 53.1387 100.078 52.7754 100.078 52.2539C100.078 51.8555 99.7793 51.5977 99.1406 51.4453L98.0273 51.1816C96.8145 50.9004 96.252 50.3613 96.252 49.418Z" fill="#FF4896"/>
-<mask id="mask0_4690_314791" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="42" width="16" height="16">
-<rect x="6" y="42" width="16" height="16" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask0_4690_314791)">
-<path d="M9.90016 53.3997C10.4668 52.9663 11.1002 52.6247 11.8002 52.3747C12.5002 52.1247 13.2335 51.9997 14.0002 51.9997C14.7668 51.9997 15.5002 52.1247 16.2002 52.3747C16.9002 52.6247 17.5335 52.9663 18.1002 53.3997C18.4891 52.9441 18.7918 52.4275 19.0085 51.8497C19.2252 51.2719 19.3335 50.6552 19.3335 49.9997C19.3335 48.5219 18.8141 47.2636 17.7752 46.2247C16.7363 45.1858 15.4779 44.6663 14.0002 44.6663C12.5224 44.6663 11.2641 45.1858 10.2252 46.2247C9.18627 47.2636 8.66683 48.5219 8.66683 49.9997C8.66683 50.6552 8.77516 51.2719 8.99183 51.8497C9.2085 52.4275 9.51127 52.9441 9.90016 53.3997ZM14.0002 50.6663C13.3446 50.6663 12.7918 50.4413 12.3418 49.9913C11.8918 49.5413 11.6668 48.9886 11.6668 48.333C11.6668 47.6775 11.8918 47.1247 12.3418 46.6747C12.7918 46.2247 13.3446 45.9997 14.0002 45.9997C14.6557 45.9997 15.2085 46.2247 15.6585 46.6747C16.1085 47.1247 16.3335 47.6775 16.3335 48.333C16.3335 48.9886 16.1085 49.5413 15.6585 49.9913C15.2085 50.4413 14.6557 50.6663 14.0002 50.6663ZM14.0002 56.6663C13.0779 56.6663 12.2113 56.4913 11.4002 56.1413C10.5891 55.7913 9.8835 55.3163 9.2835 54.7163C8.6835 54.1163 8.2085 53.4108 7.8585 52.5997C7.5085 51.7886 7.3335 50.9219 7.3335 49.9997C7.3335 49.0775 7.5085 48.2108 7.8585 47.3997C8.2085 46.5886 8.6835 45.883 9.2835 45.283C9.8835 44.683 10.5891 44.208 11.4002 43.858C12.2113 43.508 13.0779 43.333 14.0002 43.333C14.9224 43.333 15.7891 43.508 16.6002 43.858C17.4113 44.208 18.1168 44.683 18.7168 45.283C19.3168 45.883 19.7918 46.5886 20.1418 47.3997C20.4918 48.2108 20.6668 49.0775 20.6668 49.9997C20.6668 50.9219 20.4918 51.7886 20.1418 52.5997C19.7918 53.4108 19.3168 54.1163 18.7168 54.7163C18.1168 55.3163 17.4113 55.7913 16.6002 56.1413C15.7891 56.4913 14.9224 56.6663 14.0002 56.6663Z" fill="#FF4896"/>
-</g>
+<path d="M69.042 33.667V35H62.8896V25.1357H64.4209V33.667H69.042ZM72.8701 35.123C71.4346 35.123 70.3887 34.2617 70.3887 32.9082C70.3887 31.5752 71.3867 30.8027 73.1572 30.6934L75.1738 30.5703V29.9209C75.1738 29.1074 74.6543 28.6494 73.6494 28.6494C72.8291 28.6494 72.2617 28.957 72.0977 29.4971H70.6758C70.8262 28.2461 72.0293 27.4326 73.7178 27.4326C75.584 27.4326 76.6367 28.3623 76.6367 29.9209V35H75.2217V33.9473H75.1055C74.6611 34.6992 73.8477 35.123 72.8701 35.123ZM73.2461 33.9404C74.3535 33.9404 75.1738 33.2158 75.1738 32.2588V31.6162L73.3555 31.7393C72.3301 31.8076 71.8652 32.1699 71.8652 32.8467C71.8652 33.5371 72.4463 33.9404 73.2461 33.9404ZM82.6729 35.123C81.6338 35.123 80.7656 34.6445 80.3213 33.8242H80.2119V35H78.7969V24.6641H80.2666V28.752H80.3828C80.7793 27.9453 81.6543 27.4463 82.6729 27.4463C84.5596 27.4463 85.749 28.9297 85.749 31.2881C85.749 33.626 84.5527 35.123 82.6729 35.123ZM82.249 28.7041C81.0186 28.7041 80.2461 29.6953 80.2393 31.2881C80.2461 32.8809 81.0117 33.8652 82.249 33.8652C83.4932 33.8652 84.2383 32.8945 84.2383 31.2881C84.2383 29.6816 83.4932 28.7041 82.249 28.7041ZM92.4004 33.0107H93.8154C93.4941 34.3232 92.291 35.1436 90.5889 35.1436C88.4561 35.1436 87.1504 33.6738 87.1504 31.3018C87.1504 28.9434 88.4834 27.4326 90.582 27.4326C92.6533 27.4326 93.9043 28.8477 93.9043 31.1719V31.6777H88.6475V31.7461C88.6953 33.0928 89.4541 33.9404 90.6299 33.9404C91.5186 33.9404 92.127 33.6123 92.4004 33.0107ZM90.5752 28.6289C89.4883 28.6289 88.7295 29.4219 88.6475 30.6182H92.4072C92.373 29.415 91.6621 28.6289 90.5752 28.6289ZM95.7363 35V24.6641H97.2061V35H95.7363Z" fill="#B90063"/>
+<path d="M70.8047 54V52.3184H66.6797V51.2051C67.793 49.2949 69.0352 47.2969 70.2012 45.5449H72.0703V51.2051H73.2363V52.3184H72.0703V54H70.8047ZM67.9395 51.1465V51.2285H70.8223V46.6523H70.7461C69.8379 48.0176 68.8066 49.6641 67.9395 51.1465ZM75.4746 54.0879C74.9824 54.0879 74.6133 53.7188 74.6133 53.2441C74.6133 52.7695 74.9824 52.4004 75.4746 52.4004C75.9727 52.4004 76.3359 52.7695 76.3359 53.2441C76.3359 53.7188 75.9727 54.0879 75.4746 54.0879ZM78.0117 47.9941C78.0117 46.4414 79.2129 45.3398 80.918 45.3398C82.5059 45.3398 83.6484 46.3535 83.6484 47.7422C83.6484 48.7207 83.2207 49.418 81.7383 50.9062L79.875 52.7812V52.8809H83.7773V54H78.082V53.1094L80.9766 50.0977C82.0488 48.9785 82.3301 48.5566 82.3301 47.8711C82.3301 47.0508 81.7734 46.4238 80.8359 46.4238C79.8809 46.4238 79.2539 47.0566 79.2539 47.9941H78.0117ZM88.4531 54.2051C86.7715 54.2051 85.5879 53.1797 85.5059 51.709H86.7598C86.8535 52.5527 87.5391 53.1094 88.459 53.1094C89.4844 53.1094 90.1758 52.3711 90.1758 51.2695C90.1758 50.2031 89.4902 49.4883 88.4941 49.4883C87.7441 49.4883 87.1523 49.8398 86.8418 50.4258H85.6406L86.1152 45.5449H91.0195V46.6582H87.1348L86.8887 49.2539H86.9883C87.375 48.7324 88.002 48.457 88.8574 48.457C90.2871 48.457 91.459 49.5586 91.459 51.2461C91.459 53.0039 90.2461 54.2051 88.4531 54.2051ZM96.252 49.418C96.252 48.3105 97.2891 47.5137 98.7305 47.5137C100.166 47.5137 101.104 48.1816 101.227 49.2832H100.02C99.9023 48.8086 99.4453 48.498 98.7305 48.498C98.0273 48.498 97.4941 48.8438 97.4941 49.3594C97.4941 49.752 97.8164 49.998 98.5078 50.1621L99.5684 50.4082C100.781 50.6895 101.35 51.2109 101.35 52.1367C101.35 53.3203 100.23 54.123 98.707 54.123C97.1895 54.123 96.1992 53.4375 96.0879 52.3301H97.3477C97.5059 52.8281 97.9746 53.1387 98.7363 53.1387C99.5215 53.1387 100.078 52.7754 100.078 52.2539C100.078 51.8555 99.7793 51.5977 99.1406 51.4453L98.0273 51.1816C96.8145 50.9004 96.252 50.3613 96.252 49.418Z" fill="#B90063"/>
 <defs>
 <linearGradient id="paint0_linear_4690_314791" x1="80" y1="0" x2="80" y2="66" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FF7DD2" stop-opacity="0"/>

package/front_end/core/common/AppProvider.ts

@@ -4,7 +4,7 @@
 
 import * as Root from '../root/root.js';
 
-import {type App} from './App.js';
+import type {App} from './App.js';
 
 export interface AppProvider {
   createApp(): App;

package/front_end/core/common/Color.ts

@@ -2152,6 +2152,16 @@ export class Legacy implements Color {
     return new Legacy(rgba, Format.RGBA);
   }
 
+  /**
+   * Returns a new color using the NTSC formula for making a RGB color grayscale.
+   * Note: this is ill-defined for colors with alpha, and alpha is not modified.
+   */
+  grayscale(): Legacy {
+    const [r, g, b, a] = this.#rgbaInternal;
+    const gray = r * 0.299 + g * 0.587 + b * 0.114;
+    return new Legacy([gray, gray, gray, a], Format.RGBA);
+  }
+
   setAlpha(alpha: number): Legacy {
     const rgba: Color4D = [...this.#rgbaInternal];
     rgba[3] = alpha;

package/front_end/core/common/Object.ts

@@ -29,13 +29,8 @@
 
 import type * as Platform from '../platform/platform.js';
 
-import {
-  type EventDescriptor,
-  type EventListener,
-  type EventPayloadToRestParameters,
-  type EventTarget,
-  type EventTargetEvent,
-} from './EventTarget.js';
+import type {
+  EventDescriptor, EventListener, EventPayloadToRestParameters, EventTarget, EventTargetEvent} from './EventTarget.js';
 
 export interface ListenerCallbackTuple<Events, T extends keyof Events> {
   thisObject?: Object;

package/front_end/core/common/ResourceType.test.ts

@@ -18,7 +18,7 @@ const typeTestTitle = () => 'Type Test Title' as Platform.UIString.LocalizedStri
 
 describe('ResourceCategory class', () => {
   it('is able to be instantiated successfully', () => {
-    const resourceCategory = new ResourceCategory(testTitle, testShortTitle);
+    const resourceCategory = new ResourceCategory('category name', testTitle, testShortTitle);
     assert.strictEqual(resourceCategory.title(), 'Test Title', 'title is not correct');
     assert.strictEqual(resourceCategory.shortTitle(), 'Test Short Title', 'short title is not correct');
   });
@@ -26,7 +26,7 @@ describe('ResourceCategory class', () => {
 
 describeWithEnvironment('ResourceType class', () => {
   it('is able to be instantiated successfully', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(resourceType.name(), 'Type Test Name', 'name was not set correctly');
     assert.strictEqual(resourceType.title(), 'Type Test Title', 'title was not set correctly');
@@ -234,105 +234,105 @@ describeWithEnvironment('ResourceType class', () => {
   });
 
   it('is able to return its title successfully', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(resourceType.title(), 'Type Test Title', 'title was not returned correctly');
   });
 
   it('is able to return its isTextType value successfully', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isTextType(), 'isTextType was not returned correctly');
   });
 
   it('is able to return whether or not its a script if its name equals the value "script"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isScript(), 'the resource should be considered as a script');
   });
 
   it('is able to return whether or not its a script if its name equals the value "sm-script"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('sm-script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isScript(), 'the resource should be considered as a script');
   });
 
   it('is able to return whether or not its a script if its name is not equal to the values "script" or "sm-script"',
      () => {
-       const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+       const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
        const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
        assert.isFalse(resourceType.isScript(), 'the resource should not be considered as a script');
      });
 
   it('is able to return whether or not its a document if its name equals the value "document"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocument(), 'the resource should be considered as a document');
   });
 
   it('is able to return whether or not its a document if its name does not equal the value "document"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(resourceType.isDocument(), 'the resource should not be considered as a document');
   });
 
   it('is able to determine if a resource has scripts if it is a script', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.hasScripts(), 'the resource should be considered as a having scripts');
   });
 
   it('is able to determine if a resource has scripts if it is a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.hasScripts(), 'the resource should be considered as a having scripts');
   });
 
   it('is able to determine if a resource has scripts if it is not a script or a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(resourceType.hasScripts(), 'the resource should not be considered as a having scripts');
   });
 
   it('is able to return whether or not its a stylesheet if its name equals the value "stylesheet"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('stylesheet', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isStyleSheet(), 'the resource should be considered as a stylesheet');
   });
 
   it('is able to return whether or not its a stylesheet if its name equals the value "sm-stylesheet"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('sm-stylesheet', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isStyleSheet(), 'the resource should be considered as a stylesheet');
   });
 
   it('is able to return whether or not its a stylesheet if its name is not equal to the values "stylesheet" or "sm-stylesheet"',
      () => {
-       const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+       const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
        const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
        assert.isFalse(resourceType.isStyleSheet(), 'the resource should not be considered as a stylesheet');
      });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocumentOrScriptOrStyleSheet(), 'the resource should be considered as a document');
   });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was a script', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocumentOrScriptOrStyleSheet(), 'the resource should be considered as a script');
   });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was a stylesheet', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('stylesheet', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isDocumentOrScriptOrStyleSheet(), 'the resource should be considered as a stylesheet');
   });
 
   it('is able to return whether it is a document, a script or a stylesheet if it was none of those things', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(
         resourceType.isDocumentOrScriptOrStyleSheet(),
@@ -340,47 +340,47 @@ describeWithEnvironment('ResourceType class', () => {
   });
 
   it('is able to determine if it is from source map if it began with "sm-"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('sm-Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isTrue(resourceType.isFromSourceMap(), 'the resource should be considered to be from source map');
   });
 
   it('is able to determine if it is from source map if it did not begin with "sm-"', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.isFalse(resourceType.isFromSourceMap(), 'the resource should not be considered to be from source map');
   });
 
   it('is able to be converted to a string by returning its name', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.toString(), 'Type Test Name', 'the resource type was not converted to a string correctly');
   });
 
   it('is able to return the canonical mime type of a document', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('document', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.canonicalMimeType(), 'text/html', 'the canonical mime type was not returned correctly');
   });
 
   it('is able to return the canonical mime type of a script', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('script', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.canonicalMimeType(), 'text/javascript', 'the canonical mime type was not returned correctly');
   });
 
   it('is able to return the canonical mime type of a stylesheet', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('stylesheet', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(
         resourceType.canonicalMimeType(), 'text/css', 'the canonical mime type was not returned correctly');
   });
 
   it('returns an empty string as a canonical mime type if it was not a document, a script or a stylesheet', () => {
-    const testResourceCategory = new ResourceCategory(categoryTestTitle, categoryTestShortTitle);
+    const testResourceCategory = new ResourceCategory('category name', categoryTestTitle, categoryTestShortTitle);
     const resourceType = new ResourceType('Type Test Name', typeTestTitle, testResourceCategory, true);
     assert.strictEqual(resourceType.canonicalMimeType(), '', 'the canonical mime type was not returned correctly');
   });

package/front_end/core/common/ResourceType.ts

@@ -354,9 +354,13 @@ export class ResourceType {
 }
 
 export class ResourceCategory {
+  readonly name: string;
   title: () => Platform.UIString.LocalizedString;
   shortTitle: () => Platform.UIString.LocalizedString;
-  constructor(title: () => Platform.UIString.LocalizedString, shortTitle: () => Platform.UIString.LocalizedString) {
+  constructor(
+      name: string, title: () => Platform.UIString.LocalizedString,
+      shortTitle: () => Platform.UIString.LocalizedString) {
+    this.name = name;
     this.title = title;
     this.shortTitle = shortTitle;
   }
@@ -368,17 +372,22 @@ export class ResourceCategory {
 }
 
 export const resourceCategories = {
-  XHR: new ResourceCategory(i18nLazyString(UIStrings.fetchAndXHR), i18n.i18n.lockedLazyString('Fetch/XHR')),
-  Document: new ResourceCategory(i18nLazyString(UIStrings.document), i18nLazyString(UIStrings.doc)),
-  Stylesheet: new ResourceCategory(i18nLazyString(UIStrings.css), i18nLazyString(UIStrings.css)),
-  Script: new ResourceCategory(i18nLazyString(UIStrings.javascript), i18nLazyString(UIStrings.js)),
-  Font: new ResourceCategory(i18nLazyString(UIStrings.font), i18nLazyString(UIStrings.font)),
-  Image: new ResourceCategory(i18nLazyString(UIStrings.image), i18nLazyString(UIStrings.img)),
-  Media: new ResourceCategory(i18nLazyString(UIStrings.media), i18nLazyString(UIStrings.media)),
-  Manifest: new ResourceCategory(i18nLazyString(UIStrings.manifest), i18nLazyString(UIStrings.manifest)),
-  WebSocket: new ResourceCategory(i18nLazyString(UIStrings.websocket), i18nLazyString(UIStrings.ws)),
-  Wasm: new ResourceCategory(i18nLazyString(UIStrings.webassembly), i18nLazyString(UIStrings.wasm)),
-  Other: new ResourceCategory(i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)),
+  XHR: new ResourceCategory(
+      'Fetch and XHR', i18nLazyString(UIStrings.fetchAndXHR), i18n.i18n.lockedLazyString('Fetch/XHR')),
+  Document: new ResourceCategory(UIStrings.document, i18nLazyString(UIStrings.document), i18nLazyString(UIStrings.doc)),
+  Stylesheet: new ResourceCategory(UIStrings.css, i18nLazyString(UIStrings.css), i18nLazyString(UIStrings.css)),
+  Script:
+      new ResourceCategory(UIStrings.javascript, i18nLazyString(UIStrings.javascript), i18nLazyString(UIStrings.js)),
+  Font: new ResourceCategory(UIStrings.font, i18nLazyString(UIStrings.font), i18nLazyString(UIStrings.font)),
+  Image: new ResourceCategory(UIStrings.image, i18nLazyString(UIStrings.image), i18nLazyString(UIStrings.img)),
+  Media: new ResourceCategory(UIStrings.media, i18nLazyString(UIStrings.media), i18nLazyString(UIStrings.media)),
+  Manifest:
+      new ResourceCategory(UIStrings.manifest, i18nLazyString(UIStrings.manifest), i18nLazyString(UIStrings.manifest)),
+  WebSocket:
+      new ResourceCategory(UIStrings.websocket, i18nLazyString(UIStrings.websocket), i18nLazyString(UIStrings.ws)),
+  Wasm: new ResourceCategory(
+      UIStrings.webassembly, i18nLazyString(UIStrings.webassembly), i18nLazyString(UIStrings.wasm)),
+  Other: new ResourceCategory(UIStrings.other, i18nLazyString(UIStrings.other), i18nLazyString(UIStrings.other)),
 };
 
 /**

package/front_end/core/common/Revealer.ts

@@ -46,6 +46,10 @@ const UIStrings = {
    * @description The UI destination when revealing loaded resources through the Developer Resources Panel
    */
   developerResourcesPanel: 'Developer Resources panel',
+  /**
+   * @description The UI destination when revealing loaded resources through the Animations panel
+   */
+  animationsPanel: 'Animations panel',
 };
 const str_ = i18n.i18n.registerUIStrings('core/common/Revealer.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -177,6 +181,7 @@ export const RevealerDestination = {
   APPLICATION_PANEL: i18nLazyString(UIStrings.applicationPanel),
   SOURCES_PANEL: i18nLazyString(UIStrings.sourcesPanel),
   MEMORY_INSPECTOR_PANEL: i18nLazyString(UIStrings.memoryInspectorPanel),
+  ANIMATIONS_PANEL: i18nLazyString(UIStrings.animationsPanel),
 };
 
 export type RevealerDestination = () => Platform.UIString.LocalizedString;

package/front_end/core/common/SettingRegistration.ts

@@ -6,7 +6,7 @@ import * as i18n from '../i18n/i18n.js';
 import type * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
 
-import {type SettingStorageType} from './Settings.js';
+import type {SettingStorageType} from './Settings.js';
 
 const UIStrings = {
   /**

package/front_end/core/common/Settings.ts

@@ -32,7 +32,7 @@ import * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
 
 import {Console} from './Console.js';
-import {type EventDescriptor, type EventTargetEvent, type GenericEvents} from './EventTarget.js';
+import type {EventDescriptor, EventTargetEvent, GenericEvents} from './EventTarget.js';
 import {ObjectWrapper} from './Object.js';
 import {
   getLocalizedSettingsCategory,
@@ -58,7 +58,7 @@ export class Settings {
   #eventSupport: ObjectWrapper<GenericEvents>;
   #registry: Map<string, Setting<unknown>>;
   readonly moduleSettings: Map<string, Setting<unknown>>;
-  readonly #config: Root.Runtime.HostConfig;
+  #config: Root.Runtime.HostConfig;
 
   private constructor(
       readonly syncedStorage: SettingsStorage, readonly globalStorage: SettingsStorage,
@@ -128,6 +128,10 @@ export class Settings {
     return this.#config;
   }
 
+  setHostConfig(config: Root.Runtime.HostConfig): void {
+    this.#config = config;
+  }
+
   private registerModuleSetting(setting: Setting<unknown>): void {
     const settingName = setting.name;
     const category = setting.category();

package/front_end/core/host/AidaClient.ts

@@ -3,9 +3,10 @@
 // found in the LICENSE file.
 
 import * as Common from '../common/common.js';
+import type * as Root from '../root/root.js';
 
 import {InspectorFrontendHostInstance} from './InspectorFrontendHost.js';
-import {type AidaClientResult, type SyncInformation} from './InspectorFrontendHostAPI.js';
+import type {AidaClientResult, SyncInformation} from './InspectorFrontendHostAPI.js';
 import {bindOutputStream} from './ResourceLoader.js';
 
 export enum Entity {
@@ -40,6 +41,12 @@ export enum ClientFeature {
   CHROME_CONSOLE_INSIGHTS = 1,
   // Chrome freestyler.
   CHROME_FREESTYLER = 2,
+  // Chrome DrJones Network Agent.
+  CHROME_DRJONES_NETWORK_AGENT = 7,
+  // Chrome DrJones Performance Agent.
+  CHROME_DRJONES_PERFORMANCE_AGENT = 8,
+  // Chrome DrJones File Agent.
+  CHROME_DRJONES_FILE_AGENT = 9,
 }
 
 export enum UserTier {
@@ -330,3 +337,60 @@ export function convertToUserTierEnum(userTier: string|undefined): UserTier {
   }
   return UserTier.BETA;
 }
+
+let hostConfigTrackerInstance: HostConfigTracker|undefined;
+
+export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  #pollTimer?: number;
+  #aidaAvailability?: AidaAccessPreconditions;
+
+  private constructor() {
+    super();
+  }
+
+  static instance(): HostConfigTracker {
+    if (!hostConfigTrackerInstance) {
+      hostConfigTrackerInstance = new HostConfigTracker();
+    }
+    return hostConfigTrackerInstance;
+  }
+
+  override addEventListener(eventType: Events, listener: Common.EventTarget.EventListener<EventTypes, Events>):
+      Common.EventTarget.EventDescriptor<EventTypes> {
+    const isFirst = !this.hasEventListeners(eventType);
+    const eventDescriptor = super.addEventListener(eventType, listener);
+    if (isFirst) {
+      window.clearTimeout(this.#pollTimer);
+      void this.pollAidaAvailability();
+    }
+    return eventDescriptor;
+  }
+
+  override removeEventListener(eventType: Events, listener: Common.EventTarget.EventListener<EventTypes, Events>):
+      void {
+    super.removeEventListener(eventType, listener);
+    if (!this.hasEventListeners(eventType)) {
+      window.clearTimeout(this.#pollTimer);
+    }
+  }
+
+  private async pollAidaAvailability(): Promise<void> {
+    this.#pollTimer = window.setTimeout(() => this.pollAidaAvailability(), 2000);
+    const currentAidaAvailability = await AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      const config = await new Promise<Root.Runtime.HostConfig>(
+          resolve => InspectorFrontendHostInstance.getHostConfig(config => resolve(config)));
+      Common.Settings.Settings.instance().setHostConfig(config);
+      this.dispatchEventToListeners(Events.AIDA_AVAILABILITY_CHANGED);
+    }
+  }
+}
+
+export const enum Events {
+  AIDA_AVAILABILITY_CHANGED = 'aidaAvailabilityChanged',
+}
+
+export type EventTypes = {
+  [Events.AIDA_AVAILABILITY_CHANGED]: void,
+};

package/front_end/core/host/InspectorFrontendHost.ts

@@ -410,14 +410,14 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
         blockedByAge: false,
         blockedByEnterprisePolicy: false,
         blockedByGeo: false,
-        disallowLogging: false,
+        disallowLogging: true,
       },
       devToolsConsoleInsights: {
         modelId: '',
         temperature: -1,
         enabled: false,
       },
-      devToolsFreestylerDogfood: {
+      devToolsFreestyler: {
         modelId: '',
         temperature: -1,
         enabled: false,