chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/Images/src/palette.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2519)">
+<path d="M10 18C8.90278 18 7.86806 17.7917 6.89583 17.375C5.92361 16.9583 5.06944 16.3889 4.33333 15.6667C3.61111 14.9306 3.04167 14.0764 2.625 13.1042C2.20833 12.1319 2 11.0972 2 10C2 8.88889 2.20833 7.85417 2.625 6.89583C3.05556 5.92361 3.63889 5.07639 4.375 4.35417C5.125 3.61805 5.99306 3.04167 6.97917 2.625C7.97917 2.20833 9.04167 2 10.1667 2C11.25 2 12.2639 2.1875 13.2083 2.5625C14.1667 2.9375 15 3.45139 15.7083 4.10417C16.4167 4.75694 16.9722 5.52083 17.375 6.39583C17.7917 7.27083 18 8.20833 18 9.20833C18 10.5417 17.5347 11.6736 16.6042 12.6042C15.6736 13.5347 14.5417 14 13.2083 14H11.7917C11.6806 14 11.5833 14.0347 11.5 14.1042C11.4167 14.1736 11.375 14.2639 11.375 14.375C11.375 14.5833 11.4792 14.7569 11.6875 14.8958C11.8958 15.0347 12 15.4028 12 16C12 16.5139 11.8125 16.9792 11.4375 17.3958C11.0625 17.7986 10.5833 18 10 18ZM5.5 10.75C5.84722 10.75 6.13889 10.6319 6.375 10.3958C6.625 10.1458 6.75 9.84722 6.75 9.5C6.75 9.15278 6.625 8.86111 6.375 8.625C6.13889 8.375 5.84722 8.25 5.5 8.25C5.15278 8.25 4.85417 8.375 4.60417 8.625C4.36806 8.86111 4.25 9.15278 4.25 9.5C4.25 9.84722 4.36806 10.1458 4.60417 10.3958C4.85417 10.6319 5.15278 10.75 5.5 10.75ZM8 7.75C8.34722 7.75 8.63889 7.63194 8.875 7.39583C9.125 7.14583 9.25 6.84722 9.25 6.5C9.25 6.15278 9.125 5.86111 8.875 5.625C8.63889 5.375 8.34722 5.25 8 5.25C7.65278 5.25 7.35417 5.375 7.10417 5.625C6.86806 5.86111 6.75 6.15278 6.75 6.5C6.75 6.84722 6.86806 7.14583 7.10417 7.39583C7.35417 7.63194 7.65278 7.75 8 7.75ZM12 7.75C12.3472 7.75 12.6389 7.63194 12.875 7.39583C13.125 7.14583 13.25 6.84722 13.25 6.5C13.25 6.15278 13.125 5.86111 12.875 5.625C12.6389 5.375 12.3472 5.25 12 5.25C11.6528 5.25 11.3542 5.375 11.1042 5.625C10.8681 5.86111 10.75 6.15278 10.75 6.5C10.75 6.84722 10.8681 7.14583 11.1042 7.39583C11.3542 7.63194 11.6528 7.75 12 7.75ZM14.5 10.75C14.8472 10.75 15.1389 10.6319 15.375 10.3958C15.625 10.1458 15.75 9.84722 15.75 9.5C15.75 9.15278 15.625 8.86111 15.375 8.625C15.1389 8.375 14.8472 8.25 14.5 8.25C14.1528 8.25 13.8542 8.375 13.6042 8.625C13.3681 8.86111 13.25 9.15278 13.25 9.5C13.25 9.84722 13.3681 10.1458 13.6042 10.3958C13.8542 10.6319 14.1528 10.75 14.5 10.75ZM10 16.5C10.1528 16.5 10.2708 16.4444 10.3542 16.3333C10.4514 16.2083 10.5 16.0972 10.5 16C10.5 15.7778 10.3958 15.5833 10.1875 15.4167C9.97917 15.25 9.875 14.9028 9.875 14.375C9.875 13.8472 10.0556 13.4028 10.4167 13.0417C10.7917 12.6806 11.2431 12.5 11.7708 12.5H13.2083C14.125 12.5 14.9028 12.1806 15.5417 11.5417C16.1806 10.9028 16.5 10.125 16.5 9.20833C16.5 7.61111 15.8819 6.26389 14.6458 5.16667C13.4236 4.05555 11.9306 3.5 10.1667 3.5C8.30556 3.5 6.72917 4.13194 5.4375 5.39583C4.14583 6.65972 3.5 8.19444 3.5 10C3.5 11.8056 4.13194 13.3403 5.39583 14.6042C6.65972 15.8681 8.19444 16.5 10 16.5Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2519">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/Images/src/photo-camera.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4442_3515)">
+<path d="M10 14.5C11 14.5 11.8333 14.1597 12.5 13.4792C13.1667 12.7986 13.5 11.9722 13.5 11C13.5 10.0417 13.1667 9.22222 12.5 8.54167C11.8333 7.84722 11 7.5 10 7.5C9 7.5 8.16667 7.84722 7.5 8.54167C6.83333 9.22222 6.5 10.0486 6.5 11.0208C6.5 11.9792 6.83333 12.7986 7.5 13.4792C8.16667 14.1597 9 14.5 10 14.5ZM10 13C9.41667 13 8.9375 12.8056 8.5625 12.4167C8.1875 12.0278 8 11.5486 8 10.9792C8 10.4236 8.1875 9.95833 8.5625 9.58333C8.9375 9.19444 9.41667 9 10 9C10.5833 9 11.0625 9.19444 11.4375 9.58333C11.8125 9.95833 12 10.4236 12 10.9792C12 11.5486 11.8125 12.0278 11.4375 12.4167C11.0625 12.8056 10.5833 13 10 13ZM3.5 17C3.09722 17 2.74306 16.8542 2.4375 16.5625C2.14583 16.2569 2 15.9028 2 15.5V6.5C2 6.09722 2.14583 5.75 2.4375 5.45833C2.74306 5.15278 3.09722 5 3.5 5H6L7.5 3H12.5L14 5H16.5C16.9167 5 17.2708 5.15278 17.5625 5.45833C17.8542 5.75 18 6.09722 18 6.5V15.5C18 15.9028 17.8542 16.2569 17.5625 16.5625C17.2708 16.8542 16.9167 17 16.5 17H3.5ZM3.5 15.5H16.5V6.5H13.25L11.75 4.5H8.25L6.75 6.5H3.5V15.5Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4442_3515">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/Images/src/terminal.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2475)">
+<path d="M3.5 16C3.08333 16 2.72917 15.8542 2.4375 15.5625C2.14583 15.2708 2 14.9167 2 14.5V5.5C2 5.08333 2.14583 4.72917 2.4375 4.4375C2.72917 4.14583 3.08333 4 3.5 4H16.5C16.9167 4 17.2708 4.14583 17.5625 4.4375C17.8542 4.72917 18 5.08333 18 5.5V14.5C18 14.9167 17.8542 15.2708 17.5625 15.5625C17.2708 15.8542 16.9167 16 16.5 16H3.5ZM3.5 14.5H16.5V7H3.5V14.5ZM6.25 13.5L5.1875 12.4375L6.875 10.75L5.1875 9.0625L6.25 8L9 10.75L6.25 13.5ZM10 13.5V12H15V13.5H10Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2475">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/Images/src/tonality.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4467_2467)">
+<path d="M10 18C8.90278 18 7.86806 17.7917 6.89583 17.375C5.92361 16.9583 5.06944 16.3889 4.33333 15.6667C3.61111 14.9306 3.04167 14.0764 2.625 13.1042C2.20833 12.1319 2 11.0972 2 10C2 8.88889 2.20833 7.85417 2.625 6.89583C3.04167 5.92361 3.61111 5.07639 4.33333 4.35417C5.06944 3.61805 5.92361 3.04167 6.89583 2.625C7.86806 2.20833 8.90278 2 10 2C11.1111 2 12.1458 2.20833 13.1042 2.625C14.0764 3.04167 14.9236 3.61805 15.6458 4.35417C16.3819 5.07639 16.9583 5.92361 17.375 6.89583C17.7917 7.85417 18 8.88889 18 10C18 11.0972 17.7917 12.1319 17.375 13.1042C16.9583 14.0764 16.3819 14.9306 15.6458 15.6667C14.9236 16.3889 14.0764 16.9583 13.1042 17.375C12.1458 17.7917 11.1111 18 10 18ZM9.25 16.4583V3.54167C7.625 3.73611 6.25694 4.44444 5.14583 5.66667C4.04861 6.875 3.5 8.31944 3.5 10C3.5 11.6806 4.04861 13.1319 5.14583 14.3542C6.25694 15.5625 7.625 16.2639 9.25 16.4583ZM10.75 16.4583C11.2222 16.4028 11.6667 16.3056 12.0833 16.1667C12.5139 16.0139 12.9236 15.8194 13.3125 15.5833H10.75V16.4583ZM10.75 14.0833H15.0417C15.1528 13.9306 15.2569 13.7778 15.3542 13.625C15.4653 13.4722 15.5694 13.3194 15.6667 13.1667H10.75V14.0833ZM10.75 11.6667H16.2708C16.3125 11.5139 16.3472 11.3611 16.375 11.2083C16.4028 11.0556 16.4306 10.9028 16.4583 10.75H10.75V11.6667ZM10.75 9.25H16.4583C16.4306 9.09722 16.4028 8.94444 16.375 8.79167C16.3472 8.63889 16.3125 8.48611 16.2708 8.33333H10.75V9.25ZM10.75 6.83333H15.6667C15.5694 6.66667 15.4653 6.51389 15.3542 6.375C15.2569 6.22222 15.1528 6.06944 15.0417 5.91667H10.75V6.83333ZM10.75 4.41667H13.3125C12.9236 4.18055 12.5139 3.99305 12.0833 3.85417C11.6667 3.70139 11.2222 3.59722 10.75 3.54167V4.41667Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4467_2467">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/Images/src/whatsnew.svg

@@ -0,0 +1,61 @@
+<svg width="117" height="72" viewBox="0 0 117 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3425_862)">
+<rect width="117" height="72" fill="white"/>
+<g clip-path="url(#clip1_3425_862)">
+<path d="M714.5 -129H-130V434.556H714.5V-129Z" fill="#1A73E8"/>
+<path d="M-130 -129L187.039 188.352" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M187.039 -129.352L-130 188" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M49.4563 -129V188" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M7.2312 -129V188" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M433 50.6333H-130" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M433 8.3667H-130" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M28.3437 59.3626C44.8201 59.3626 58.1768 45.9926 58.1768 29.5C58.1768 13.0074 44.8201 -0.362549 28.3437 -0.362549C11.8674 -0.362549 -1.48938 13.0074 -1.48938 29.5C-1.48938 45.9926 11.8674 59.3626 28.3437 59.3626Z" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M-130 29.5H433" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M28.3438 -129V188" stroke="white" stroke-opacity="0.3" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9919 71.0622C51.1178 71.0622 69.865 52.2965 69.865 29.1478C69.865 5.99907 51.1178 -12.7667 27.9919 -12.7667C4.86601 -12.7667 -13.8812 5.99907 -13.8812 29.1478C-13.8812 52.2965 4.86601 71.0622 27.9919 71.0622Z" stroke="white"/>
+<path d="M27.9918 50.4312C39.7348 50.4312 49.2543 40.9023 49.2543 29.1478C49.2543 17.3932 39.7348 7.86432 27.9918 7.86432C16.2489 7.86432 6.72937 17.3932 6.72937 29.1478C6.72937 40.9023 16.2489 50.4312 27.9918 50.4312Z" stroke="white"/>
+<path d="M27.9917 44.9895C36.7322 44.9895 43.8179 37.8969 43.8179 29.1478C43.8179 20.3986 36.7322 13.306 27.9917 13.306C19.2511 13.306 12.1655 20.3986 12.1655 29.1478C12.1655 37.8969 19.2511 44.9895 27.9917 44.9895Z" stroke="white"/>
+<path d="M46.4138 39.8083L28.3993 71.0412" stroke="white"/>
+<path d="M9.54724 39.8063L-8.46729 8.57346" stroke="white"/>
+<path d="M27.9923 7.86432L64.0214 7.86432" stroke="white"/>
+</g>
+<g filter="url(#filter0_dd_3425_862)">
+<path d="M73.0588 30.8038C77.0588 33.1132 77.0588 38.8867 73.0588 41.1961L56.4706 50.7734C52.4706 53.0828 47.4706 50.196 47.4706 45.5772L47.4706 26.4228C47.4706 21.804 52.4706 18.9172 56.4706 21.2266L73.0588 30.8038Z" fill="#ECF3FE"/>
+</g>
+<g filter="url(#filter1_f_3425_862)">
+<path d="M78 30.8038C82 33.1132 82 38.8868 78 41.1962L54 55.0526C50 57.362 45 54.4752 45 49.8564L45 22.1436C45 17.5248 50 14.638 54 16.9474L78 30.8038Z" fill="white" fill-opacity="0.3"/>
+</g>
+<g opacity="0.9">
+<rect x="79" y="12" width="30" height="16" rx="4" fill="white"/>
+<path d="M83.803 24V18.214H85.156V18.918H85.244C85.4127 18.6467 85.6473 18.434 85.948 18.28C86.2487 18.1187 86.586 18.038 86.96 18.038C87.6273 18.038 88.1333 18.2397 88.478 18.643C88.8227 19.039 88.995 19.5963 88.995 20.315V24H87.554V20.513C87.554 20.1463 87.4623 19.8677 87.279 19.677C87.103 19.479 86.8537 19.38 86.531 19.38C86.267 19.38 86.036 19.4497 85.838 19.589C85.6473 19.721 85.5007 19.9007 85.398 20.128C85.2953 20.3553 85.244 20.6157 85.244 20.909V24H83.803ZM93.0571 24.176C92.4778 24.176 91.9754 24.0513 91.5501 23.802C91.1248 23.5527 90.7948 23.197 90.5601 22.735C90.3254 22.273 90.2081 21.7303 90.2081 21.107C90.2081 20.4763 90.3291 19.9337 90.5711 19.479C90.8204 19.017 91.1614 18.6613 91.5941 18.412C92.0268 18.1627 92.5181 18.038 93.0681 18.038C93.6768 18.038 94.1791 18.1517 94.5751 18.379C94.9784 18.599 95.2791 18.918 95.4771 19.336C95.6751 19.7467 95.7741 20.238 95.7741 20.81C95.7741 20.92 95.7704 21.03 95.7631 21.14C95.7631 21.25 95.7558 21.349 95.7411 21.437H91.5941C91.6234 21.6937 91.6858 21.9173 91.7811 22.108C91.9131 22.372 92.0928 22.57 92.3201 22.702C92.5548 22.834 92.8188 22.9 93.1121 22.9C93.4494 22.9 93.7208 22.8193 93.9261 22.658C94.1388 22.4893 94.2928 22.2877 94.3881 22.053L95.6421 22.394C95.4661 22.922 95.1654 23.351 94.7401 23.681C94.3221 24.011 93.7611 24.176 93.0571 24.176ZM91.6601 20.414H94.3991C94.3844 20.2307 94.3441 20.0657 94.2781 19.919C94.2194 19.765 94.1314 19.6367 94.0141 19.534C93.9041 19.424 93.7684 19.3433 93.6071 19.292C93.4531 19.2333 93.2771 19.204 93.0791 19.204C92.7931 19.204 92.5364 19.2773 92.3091 19.424C92.0818 19.5707 91.9058 19.787 91.7811 20.073C91.7298 20.1757 91.6894 20.2893 91.6601 20.414ZM97.953 24L96.281 18.214H97.887L98.756 21.899H98.833L99.845 18.214H101.297L102.32 21.899H102.397L103.266 18.214H104.85L103.167 24H101.616L100.582 20.26H100.505L99.493 24H97.953Z" fill="#1A73E8"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_3425_862" x="39.4706" y="14.4138" width="44.5883" height="47.1724" 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="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_3425_862"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="3"/>
+<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_3425_862"/>
+<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_3425_862" result="effect2_dropShadow_3425_862"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3425_862" result="shape"/>
+</filter>
+<filter id="filter1_f_3425_862" x="37" y="8.13464" width="52" height="55.7307" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_3425_862"/>
+</filter>
+<clipPath id="clip0_3425_862">
+<rect width="117" height="72" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3425_862">
+<rect width="563" height="317" fill="white" transform="translate(-130 -129)"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/Tests.js

@@ -27,7 +27,6 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-/* eslint-disable indent */
 
 /**
  * @fileoverview This file contains small testing framework along with the
@@ -158,39 +157,33 @@
   };
 
   TestSuite.prototype.setupLegacyFilesForTest = async function() {
-    try {
-      // 'Tests.js' is executed on 'about:blank' so we can't use `import` directly without
-      // specifying the full devtools://devtools/bundled URL.
-      ([
-        Common,
-        HostModule,
-        Root,
-        SDK,
-        Sources,
-        Timeline,
-        UI,
-        Workspace,
-      ] =
-           await Promise.all([
-             self.runtime.loadLegacyModule('core/common/common.js'),
-             self.runtime.loadLegacyModule('core/host/host.js'),
-             self.runtime.loadLegacyModule('core/root/root.js'),
-             self.runtime.loadLegacyModule('core/sdk/sdk.js'),
-             self.runtime.loadLegacyModule('panels/sources/sources.js'),
-             self.runtime.loadLegacyModule('panels/timeline/timeline.js'),
-             self.runtime.loadLegacyModule('ui/legacy/legacy.js'),
-             self.runtime.loadLegacyModule('models/workspace/workspace.js'),
-           ]));
-
-      // We have to map 'Host.InspectorFrontendHost' as the C++ uses it directly.
-      self.Host = {};
-      self.Host.InspectorFrontendHost = HostModule.InspectorFrontendHost.InspectorFrontendHostInstance;
-      self.Host.InspectorFrontendHostAPI = HostModule.InspectorFrontendHostAPI;
-
-      this.reportOk_();
-    } catch (e) {
-      this.reportFailure_(e);
-    }
+    // 'Tests.js' is executed on 'about:blank' so we can't use `import` directly without
+    // specifying the full devtools://devtools/bundled URL.
+    ([
+      Common,
+      HostModule,
+      Root,
+      SDK,
+      Sources,
+      Timeline,
+      UI,
+      Workspace,
+    ] =
+         await Promise.all([
+           self.runtime.loadLegacyModule('core/common/common.js'),
+           self.runtime.loadLegacyModule('core/host/host.js'),
+           self.runtime.loadLegacyModule('core/root/root.js'),
+           self.runtime.loadLegacyModule('core/sdk/sdk.js'),
+           self.runtime.loadLegacyModule('panels/sources/sources.js'),
+           self.runtime.loadLegacyModule('panels/timeline/timeline.js'),
+           self.runtime.loadLegacyModule('ui/legacy/legacy.js'),
+           self.runtime.loadLegacyModule('models/workspace/workspace.js'),
+         ]));
+
+    // We have to map 'Host.InspectorFrontendHost' as the C++ uses it directly.
+    self.Host = {};
+    self.Host.InspectorFrontendHost = HostModule.InspectorFrontendHost.InspectorFrontendHostInstance;
+    self.Host.InspectorFrontendHostAPI = HostModule.InspectorFrontendHostAPI;
   };
 
   /**
@@ -1138,13 +1131,7 @@
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.NetworkManager.NetworkManager, SDK.NetworkManager.Events.ResponseReceived, onResponseReceived);
 
-    this.evaluateInConsole_(
-        `
-      let img = document.createElement('img');
-      img.src = "${url}";
-      document.body.appendChild(img);
-    `,
-        () => {});
+    this.evaluateInConsole_(`location.href= "${url}";`, () => {});
 
     let count = 0;
     function onResponseReceived(event) {

package/front_end/application_tokens.css

@@ -0,0 +1,407 @@
+/*
+ * Copyright 2023 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.
+ */
+
+ /**
+  * Application-specific tokens list tokens that differ from our core design system.
+  *
+  * Before adding to this file, make sure that there's really no usable --sys-* definition
+  * in design_system_tokens.css. Additions to this file should be an exception.
+  */
+:root {
+  /* Colors */
+
+  --icon-action: var(--sys-color-primary-bright);
+  --icon-arrow-main-thread: var(--sys-color-primary-bright);
+  --icon-checkmark-green: var(--sys-color-green-bright);
+  --icon-default: var(--sys-color-on-surface-subtle);
+  --icon-default-hover: var(--sys-color-on-surface);
+  --icon-disabled: var(--sys-color-state-disabled);
+  --icon-error: var(--sys-color-error-bright);
+  --icon-file-authored: var(--sys-color-orange-bright);
+  --icon-file-default: var(--sys-color-on-surface-subtle);
+  --icon-file-document: var(--sys-color-blue-bright);
+  --icon-file-font: var(--sys-color-cyan-bright);
+  --icon-file-media: var(--sys-color-green-bright);
+  --icon-file-image: var(--sys-color-green-bright);
+  --icon-file-script: var(--sys-color-orange-bright);
+  --icon-file-styles: var(--sys-color-purple-bright);
+  --icon-fold-marker: var(--sys-color-on-surface-subtle);
+  --icon-folder-authored: var(--sys-color-orange);
+  --icon-folder-primary: var(--sys-color-on-surface-subtle);
+  --icon-folder-deployed: var(--sys-color-primary-bright);
+  --icon-folder-workspace: var(--sys-color-orange);
+  --icon-gap-focus-selected: var(--sys-color-tonal-container);
+  --icon-gap-default: var(--sys-color-cdt-base-container);
+  --icon-gap-inactive: var(--sys-color-neutral-container);
+  --icon-gap-hover: var(--sys-color-state-hover-on-subtle);
+  --icon-gap-toolbar: var(--sys-color-surface1);
+  --icon-gap-toolbar-hover: var(--sys-color-state-header-hover);
+  --icon-info: var(--sys-color-primary-bright);
+  --icon-link: var(--sys-color-primary-bright);
+  --icon-no-request: var(--sys-color-orange-bright);
+  --icon-primary: var(--sys-color-primary-bright);
+  --icon-request-response: var(--sys-color-primary-bright);
+  --icon-request: var(--sys-color-on-surface-subtle);
+  --icon-css: var(--sys-color-purple-bright);
+  --icon-css-hover: var(--sys-color-purple);
+  --icon-toggled: var(--sys-color-primary-bright);
+  --icon-warning: var(--sys-color-orange-bright);
+  --ui-text: var(--sys-color-on-surface-subtle);
+  --text-disabled: var(--ref-palette-neutral60);
+  --text-primary: var(--sys-color-on-surface);
+  --text-secondary: var(--sys-color-token-subtle);
+  --text-link: var(--sys-color-primary);
+  --color-grid-stripe: var(--sys-color-surface1);
+  --color-grid-default: var(--sys-color-surface);
+  --color-grid-focus-selected: var(--sys-color-tonal-container);
+  --color-grid-selected: var(--sys-color-surface-variant);
+  --color-grid-hovered: var(--sys-color-state-hover-on-subtle);
+  --color-primary-old: rgb(26 115 232);
+  --color-primary-variant: rgb(66 133 244);
+  --color-background: rgb(255 255 255);
+  --color-background-inverted: rgb(0 0 0);
+  --color-background-inverted-opacity-0: rgb(0 0 0 / 0%);
+  --color-background-inverted-opacity-2: rgb(0 0 0 / 2%);
+  --color-background-inverted-opacity-30: rgb(0 0 0 / 30%);
+  --color-background-inverted-opacity-50: rgb(0 0 0 / 50%);
+  --color-background-opacity-50: rgb(255 255 255 / 50%);
+  --color-background-opacity-80: rgb(255 255 255 / 80%);
+  --color-background-elevation-1: rgb(241 243 244);
+  --color-background-elevation-2: rgb(222 225 230);
+  /** Used when the elevation is visible only on dark theme */
+  --color-background-elevation-dark-only: var(--color-background);
+  /** To draw grid lines behind elements */
+  --divider-line: rgb(0 0 0 / 10%);
+  --color-text-primary: rgb(32 33 36);
+  --color-text-secondary: rgb(95 99 104);
+  --color-text-disabled: rgb(128 134 139);
+  --color-red: rgb(238 68 47);
+  --drop-shadow:
+    0 0 0 1px rgb(0 0 0 / 5%),
+    0 2px 4px rgb(0 0 0 / 20%),
+    0 2px 6px rgb(0 0 0 / 10%);
+  --drop-shadow-depth-1:
+    0 1px 2px rgb(60 64 67 / 30%),
+    0 1px 3px 1px rgb(60 64 67 / 15%);
+  --drop-shadow-depth-3:
+    0 4px 8px 3px rgb(60 64 67 / 15%),
+    0 1px 3px rgb(60 64 67 / 30%);
+  --box-shadow-outline-color: rgb(0 0 0 / 50%);
+  /** These are the colors of the native Mac scrollbars */
+  --color-scrollbar-mac: rgb(143 143 143 / 60%);
+  --color-scrollbar-mac-hover: rgb(64 64 64 / 60%);
+  /** These colors are used on all non-Mac platforms for scrollbars */
+  --color-scrollbar-other: rgb(0 0 0 / 50%);
+  --color-scrollbar-other-hover: rgb(0 0 0 / 50%);
+  /** The colors are for issue icons and related highlights */
+  --issue-color-red: rgb(235 57 65);
+  --issue-color-yellow: rgb(242 153 0);
+  --issue-color-blue: rgb(26 115 232);
+  /** Used to indicate an input box */
+  --input-outline: rgb(202 205 209);
+
+  /** These colors are used to show errors */
+  --color-error-text: #f00;
+
+  /* Colors used by the code editor */
+  --color-continue-to-location: var(--ref-palette-blue90);
+  --color-continue-to-location-hover: var(--ref-palette-blue80);
+  --color-continue-to-location-hover-border: var(--ref-palette-blue70);
+  --color-continue-to-location-async: var(--ref-palette-green90);
+  --color-continue-to-location-async-hover: var(--ref-palette-green80);
+  --color-continue-to-location-async-hover-border: var(--ref-palette-green70);
+  --color-evaluated-expression: var(--ref-palette-yellow95);
+  --color-evaluated-expression-border: var(--ref-palette-yellow70);
+  --color-variable-values: var(--ref-palette-orange90);
+
+  /* Color tokens for icons */
+  --color-primary: rgb(11 87 208);
+  --legacy-accent-color: #1a73e8;
+  --legacy-focus-ring-inactive-shadow-color: #e0e0e0;
+  --legacy-input-validation-error: #db1600;
+  --legacy-selection-bg-color: var(--legacy-accent-color);
+  --legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
+  --legacy-focus-ring-active-shadow: 0 0 0 1px var(--legacy-accent-color);
+
+  /* Color for strokestyle of canvas in flame chart */
+  /* It is the same color as sys-color-primary but with a 10% opacity */
+  --app-color-strokestyle: rgb(11 87 208 / 10%);
+
+  /* Colors for data grid in Performance Panel */
+
+  --app-color-selected-progress-bar: var(--ref-palette-primary80);
+  --app-border-selected-progress-bar: var(--ref-palette-primary70);
+
+  /* Colors for timeline in Performance Panel */
+
+  --app-color-loading: var(--ref-palette-blue70);
+  --app-color-loading-children: var(--ref-palette-blue80);
+  --app-color-scripting: var(--ref-palette-yellow70);
+  --app-color-scripting-children: var(--ref-palette-yellow80);
+  --app-color-rendering: var(--ref-palette-purple70);
+  --app-color-rendering-children: var(--ref-palette-purple80);
+  --app-color-painting: var(--ref-palette-green70);
+  --app-color-painting-children: var(--ref-palette-green80);
+  --app-color-messaging: var(--ref-palette-cyan70);
+  --app-color-messaging-children: var(--ref-palette-cyan80);
+  --app-color-task: var(--ref-palette-neutral80);
+  --app-color-task-children: var(--ref-palette-neutral90);
+  --app-color-system: var(--ref-palette-neutral80);
+  --app-color-system-children: var(--ref-palette-neutral90);
+  --app-color-idle: var(--ref-palette-neutral90);
+  --app-color-idle-children: var(--ref-palette-neutral100);
+  --app-color-async: var(--ref-palette-error60);
+  --app-color-async-children: var(--ref-palette-error70);
+  --app-color-other: var(--ref-palette-neutral87);
+  --app-color-doc: var(--ref-palette-blue60);
+  --app-color-css: var(--ref-palette-purple60);
+  --app-color-image: var(--ref-palette-green80);
+  --app-color-media: var(--ref-palette-green60);
+  --app-color-font: var(--ref-palette-cyan60);
+  --app-color-wasm: var(--ref-palette-indigo60);
+
+  /**
+   * Color for the active breadcrumb in the Performance Panel timeline.
+   */
+  --app-color-active-breadcrumb: var(--ref-palette-blue40);
+
+  /**
+   * Colors for the pie chart in the Memory panel.
+   */
+  --app-color-code: var(--ref-palette-cyan70);
+  --app-color-strings: var(--ref-palette-purple70);
+  --app-color-js-arrays: var(--ref-palette-green70);
+  --app-color-typed-arrays: var(--ref-palette-indigo60);
+  --app-color-other-js-objects: var(--ref-palette-blue70);
+  --app-color-other-non-js-objects: var(--ref-palette-yellow70);
+
+  /**
+   * Colors for Coverage visualization.
+   */
+  --app-color-coverage-used: var(--ref-palette-neutral80);
+  --app-color-coverage-unused: var(--sys-color-error-bright);
+  --app-color-toolbar-background: var(--sys-color-surface4);
+
+  /**
+   * Colors for menus.
+   */
+  --app-color-menu-background: var(--sys-color-surface);
+
+  /**
+   * Colors for navigation drawers.
+   */
+  --app-color-navigation-drawer-label-selected: var(--sys-color-on-surface);
+  --app-color-navigation-drawer-background-selected: var(--ref-palette-primary95);
+
+   /**
+   * Colors for performance panel metric ratings.
+   */
+  --app-color-performance-bad: var(--sys-color-error-bright);
+  --app-color-performance-ok: var(--sys-color-orange-bright);
+  --app-color-performance-good: var(--sys-color-green-bright);
+  --app-color-performance-bad-dim: var(--sys-color-error);
+  --app-color-performance-ok-dim: var(--sys-color-orange);
+  --app-color-performance-good-dim: var(--sys-color-green);
+
+  /**
+   * Colors for performance panel annotations list in sidebar.
+   */
+  --app-color-performance-sidebar-time-range: var(--ref-palette-pink60);
+  --app-color-performance-sidebar-label-text-dark: var(--ref-palette-neutral10);
+  --app-color-performance-sidebar-label-text-light: var(--ref-palette-neutral100);
+
+  /**
+   * Colors for cards.
+   */
+  --app-color-card-background: var(--sys-color-base-container-elevated);
+  --app-color-card-divider: color-mix(in srgb, var(--ref-palette-neutral0) 6%, transparent);
+
+  /**
+   * Colors for element panel sidebar subtitle
+   */
+  --app-color-element-sidebar-subtitle: var(--ref-palette-neutral50);
+
+  /**
+   * Color for input driver for AI assistance chat
+   */
+  --app-color-ai-assistance-input-divider: rgb(0 0 0 / 10%);
+
+  &.baseline-default {
+    /**
+     * Color for navigation drawers.
+     */
+    --app-color-navigation-drawer-label-selected: var(--sys-color-primary);
+
+    &.theme-with-dark-background {
+      /**
+       * Color for navigation drawers.
+       */
+      --app-color-navigation-drawer-label-selected: var(--sys-color-surface);
+    }
+  }
+
+  /**
+   * Combobox image.
+   */
+   --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-light);
+
+  &.theme-with-dark-background {
+    --color-primary-old: rgb(138 180 248);
+    --color-primary-variant: rgb(102 157 246);
+    --color-background: rgb(32 33 36);
+    --color-background-inverted: rgb(255 255 255);
+    --color-background-inverted-opacity-2: rgb(255 255 255 / 2%);
+    --color-background-inverted-opacity-30: rgb(255 255 255 / 30%);
+    --color-background-inverted-opacity-50: rgb(255 255 255 / 50%);
+    --color-background-opacity-50: rgb(32 33 36 / 50%);
+    --color-background-opacity-80: rgb(32 33 36 / 80%);
+    --color-background-elevation-1: rgb(41 42 45);
+    --color-background-elevation-2: rgb(53 54 58);
+    --color-background-elevation-dark-only: var(--color-background-elevation-1);
+    --divider-line: rgb(255 255 255 / 10%);
+    --color-text-primary: rgb(232 234 237);
+    --color-text-secondary: rgb(154 160 166);
+    --color-text-disabled: rgb(128 134 139);
+    --color-red: rgb(237 78 76);
+    --drop-shadow:
+      0 0 0 1px rgb(255 255 255 / 20%),
+      0 2px 4px 2px rgb(0 0 0 / 20%),
+      0 2px 6px 2px rgb(0 0 0 / 10%);
+    --drop-shadow-depth-1:
+      0 1px 2px rgb(0 0 0 / 30%),
+      0 1px 3px 1px rgb(0 0 0 / 15%);
+    --drop-shadow-depth-3:
+      0 4px 8px 3px rgb(0 0 0 / 15%),
+      0 1px 3px rgb(0 0 0 / 30%);
+    --box-shadow-outline-color: rgb(0 0 0 / 50%);
+    --color-scrollbar-mac: rgb(51 51 51);
+    --color-scrollbar-mac-hover: rgb(75 76 79);
+    --color-scrollbar-other: rgb(51 51 51);
+    --color-scrollbar-other-hover: rgb(75 76 79);
+    --color-error-text: hsl(0deg 100% 75%);
+
+    /* Colors used by the code editor */
+    --color-continue-to-location: var(--ref-palette-yellow30);
+    --color-continue-to-location-hover: var(--ref-palette-yellow40);
+    --color-continue-to-location-hover-border: var(--ref-palette-yellow50);
+    --color-continue-to-location-async: var(--ref-palette-green30);
+    --color-continue-to-location-async-hover: var(--ref-palette-green4);
+    --color-continue-to-location-async-hover-border: var(--ref-palette-green50);
+    --color-evaluated-expression: var(--ref-palette-yellow30);
+    --color-evaluated-expression-border: var(--ref-palette-yellow40);
+    --color-variable-values: var(--sys-color-surface-error);
+
+    /* Color tokens for icons */
+    --color-primary: rgb(168 199 250);
+
+    /**
+    * Inherit the native form control colors when using a dark theme.
+    * Override them using CSS variables if needed.
+    */
+    color-scheme: dark;
+
+    --legacy-accent-color: #0e639c;
+    --legacy-focus-ring-inactive-shadow-color: #5a5a5a;
+    --legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
+
+    /* Color for strokestyle of canvas in flame chart */
+    /* It is the same color as sys-color-primary but with a 10% opacity */
+    --app-color-strokestyle: rgb(168 199 250 / 10%);
+
+    /* Colors for data grid in Performance Panel */
+
+    --app-color-selected-progress-bar: var(--ref-palette-secondary40);
+    --app-border-selected-progress-bar: var(--ref-palette-secondary50);
+
+    /* Colors for timeline in Performance Panel */
+
+    --app-color-loading: var(--ref-palette-blue60);
+    --app-color-loading-children: var(--ref-palette-blue50);
+    --app-color-scripting: var(--ref-palette-yellow70);
+    --app-color-scripting-children: var(--ref-palette-yellow60);
+    --app-color-rendering: var(--ref-palette-purple60);
+    --app-color-rendering-children: var(--ref-palette-purple50);
+    --app-color-painting: var(--ref-palette-green70);
+    --app-color-painting-children: var(--ref-palette-green60);
+    --app-color-task: var(--ref-palette-neutral80);
+    --app-color-task-children: var(--ref-palette-neutral70);
+    --app-color-system: var(--ref-palette-neutral50);
+    --app-color-system-children: var(--ref-palette-neutral40);
+    --app-color-idle: var(--ref-palette-neutral30);
+    --app-color-idle-children: var(--ref-palette-neutral20);
+    --app-color-async: var(--ref-palette-error60);
+    --app-color-async-children: var(--ref-palette-error50);
+    --app-color-other: var(--ref-palette-neutral60);
+    --app-color-doc: var(--ref-palette-blue60);
+    --app-color-css: var(--ref-palette-purple60);
+    --app-color-image: var(--ref-palette-green80);
+    --app-color-media: var(--ref-palette-green60);
+    --app-color-font: var(--ref-palette-cyan60);
+    --app-color-wasm: var(--ref-palette-indigo60);
+
+    /**
+     * Color for the active breadcrumb in the Performance Panel timeline.
+     */
+    --app-color-active-breadcrumb: var(--ref-palette-blue40);
+
+    /**
+     * Colors for the pie chart in the Memory panel.
+     */
+    --app-color-code: var(--ref-palette-cyan70);
+    --app-color-strings: var(--ref-palette-purple60);
+    --app-color-js-arrays: var(--ref-palette-green70);
+    --app-color-typed-arrays: var(--ref-palette-indigo60);
+    --app-color-other-js-objects: var(--ref-palette-blue60);
+    --app-color-other-non-js-objects: var(--ref-palette-yellow70);
+
+    /**
+    * Gradients
+    */
+    --sys-color-gradient-primary: var(--ref-palette-primary30);
+    --sys-color-gradient-tertiary: var(--ref-palette-tertiary30);
+
+    /**
+     * Colors for Coverage visualization.
+     */
+    --app-color-coverage-used: var(--ref-palette-neutral40);
+    --app-color-coverage-unused: var(--sys-color-error-bright);
+    --app-color-toolbar-background: var(--sys-color-base);
+
+    /**
+     * Colors for menus.
+     */
+    --app-color-menu-background: var(--sys-color-surface3);
+
+    /**
+     * Colors for navigation drawers.
+     */
+    --app-color-navigation-drawer-label-selected: var(--sys-color-surface);
+    --app-color-navigation-drawer-background-selected: var(--ref-palette-primary70);
+
+    /**
+     * Colors for cards.
+     */
+    --app-color-card-divider: color-mix(in srgb, var(--ref-palette-neutral100) 10%, transparent);
+    --app-color-card-background: var(--sys-color-surface2);
+
+    /**
+     * Colors for element panel sidebar subtitle
+     */
+    --app-color-element-sidebar-subtitle: var(--sys-color-token-subtle);
+
+    /**
+     * Color for input driver for AI assistance chat
+     */
+    --app-color-ai-assistance-input-divider: rgb(255 255 255 / 15%);
+
+    /**
+    * Combobox image.
+    */
+    --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-dark);
+  }
+
+  /* Colors end */
+}

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

@@ -30,12 +30,12 @@ describe('Base64 decoder', () => {
 describe('Base64 encoder', () => {
   it('encodes ArrayBuffers correctly', async () => {
     const buffer1 = new Uint8Array([0]);
-    assert.strictEqual(await Common.Base64.encode(buffer1), 'AA==');
+    assert.strictEqual(await Common.Base64.encode(buffer1.buffer), 'AA==');
 
     const buffer2 = new Uint8Array([0, 1]);
-    assert.strictEqual(await Common.Base64.encode(buffer2), 'AAE=');
+    assert.strictEqual(await Common.Base64.encode(buffer2.buffer), 'AAE=');
 
     const buffer3 = new Uint8Array([0, 1, 2]);
-    assert.strictEqual(await Common.Base64.encode(buffer3), 'AAEC');
+    assert.strictEqual(await Common.Base64.encode(buffer3.buffer), 'AAEC');
   });
 });

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

@@ -41,6 +41,6 @@ describe('CharacterIdMap class', () => {
 
   it('returns null when trying to convert  a character that does not exist in the Map', () => {
     const characterIdMap = new CharacterIdMap();
-    assert.strictEqual(characterIdMap.fromChar('!'), null, 'character was not converted correctly');
+    assert.isNull(characterIdMap.fromChar('!'), 'character was not converted correctly');
   });
 });