chrome-devtools-frontend 1.0.928589 → 1.0.929998

package/config/gni/devtools_grd_files.gni

@@ -116,6 +116,7 @@ grd_files_release_sources = [
   "front_end/Images/nodeIcon.avif",
   "front_end/Images/node_search_icon.svg",
   "front_end/Images/popoverArrows.png",
+  "front_end/Images/preview_feature_video_thumbnail.svg",
   "front_end/Images/profileGroupIcon.png",
   "front_end/Images/profileIcon.png",
   "front_end/Images/profileSmallIcon.png",
@@ -354,6 +355,7 @@ grd_files_release_sources = [
   "front_end/panels/coverage/coverage-meta.js",
   "front_end/panels/coverage/coverage.js",
   "front_end/panels/coverage/coverage_module.js",
+  "front_end/panels/css_overview/components/components.js",
   "front_end/panels/css_overview/css_overview-meta.js",
   "front_end/panels/css_overview/css_overview.js",
   "front_end/panels/css_overview/css_overview_module.js",
@@ -485,6 +487,7 @@ grd_files_release_sources = [
   "front_end/third_party/marked/marked.js",
   "front_end/third_party/wasmparser/wasmparser.js",
   "front_end/ui/components/adorners/adorners.js",
+  "front_end/ui/components/buttons/buttons.js",
   "front_end/ui/components/code_highlighter/code_highlighter.js",
   "front_end/ui/components/data_grid/data_grid.js",
   "front_end/ui/components/expandable_list/expandable_list.js",
@@ -903,13 +906,13 @@ grd_files_debug_sources = [
   "front_end/panels/css_overview/CSSOverviewPanel.js",
   "front_end/panels/css_overview/CSSOverviewProcessingView.js",
   "front_end/panels/css_overview/CSSOverviewSidebarPanel.js",
-  "front_end/panels/css_overview/CSSOverviewStartView.js",
   "front_end/panels/css_overview/CSSOverviewUnusedDeclarations.js",
+  "front_end/panels/css_overview/components/CSSOverviewStartView.js",
+  "front_end/panels/css_overview/components/cssOverviewStartView.css.js",
   "front_end/panels/css_overview/cssOverview.css.js",
   "front_end/panels/css_overview/cssOverviewCompletedView.css.js",
   "front_end/panels/css_overview/cssOverviewProcessingView.css.js",
   "front_end/panels/css_overview/cssOverviewSidebarPanel.css.js",
-  "front_end/panels/css_overview/cssOverviewStartView.css.js",
   "front_end/panels/developer_resources/DeveloperResourcesListView.js",
   "front_end/panels/developer_resources/DeveloperResourcesView.js",
   "front_end/panels/developer_resources/developerResourcesListView.css.js",
@@ -1350,6 +1353,8 @@ grd_files_debug_sources = [
   "front_end/third_party/wasmparser/package/dist/esm/WasmParser.js",
   "front_end/ui/components/adorners/Adorner.js",
   "front_end/ui/components/adorners/adorner.css.js",
+  "front_end/ui/components/buttons/Button.js",
+  "front_end/ui/components/buttons/button.css.js",
   "front_end/ui/components/code_highlighter/CodeHighlighter.js",
   "front_end/ui/components/code_highlighter/codeHighlighter.css.js",
   "front_end/ui/components/data_grid/DataGrid.js",

package/config/gni/devtools_image_files.gni

@@ -124,6 +124,7 @@ devtools_svg_sources = [
   "network_conditions_icon.svg",
   "network_panel_icon.svg",
   "node_search_icon.svg",
+  "preview_feature_video_thumbnail.svg",
   "refresh_12x12_icon.svg",
   "resizeDiagonal.svg",
   "resizeHorizontal.svg",

package/front_end/Images/src/preview_feature_video_thumbnail.svg

@@ -0,0 +1,92 @@
+<svg width="144" height="92" viewBox="0 0 144 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="144" height="92" rx="8" fill="#F1F3F4"/>
+<rect width="165" height="92" rx="1.93492" fill="#D2E3FC"/>
+<g clip-path="url(#clip1)">
+<rect x="0.0914612" y="6.11472" width="50.7008" height="50.7008" rx="2.9824" fill="#D2E3FC"/>
+<rect x="-8.85574" y="13.5707" width="68.5952" height="68.5952" rx="2.9824" fill="#8AB4F8"/>
+<rect x="-16.3118" y="21.0267" width="83.5072" height="83.5072" rx="2.9824" fill="#1967D2"/>
+<g clip-path="url(#clip2)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.56504 41.5306V21.0266H4.19224V41.5306H-16.3118V41.9034H4.19224V83.4707H-16.3118V83.8435H4.19224L4.19224 104.534H4.56504L4.56504 83.8435H46.3187V104.534H46.6915V83.8435H67.1955V83.4707H46.6915V41.9034H67.1955V41.5306H46.6915V21.4984H46.3187V41.5306H4.56504ZM4.56504 41.9034V83.4707H46.3187V41.9034H4.56504Z" fill="#8AB4F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.496 62.991L66.785 104.028L67.0495 103.766L25.7601 62.7278L66.9457 21.6905L66.6817 21.4274L25.4957 62.465L-16.1966 21.0269L-16.461 21.2897L25.2316 62.7282L-16.4609 104.27L-16.1968 104.534L25.496 62.991Z" fill="#8AB4F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.7029 62.5939V20.8402H25.3302V62.5939H-16.4981V62.9667H25.3302V104.347H25.7029V62.9667L67.0091 62.9667V62.5939L25.7029 62.5939Z" fill="#8AB4F8"/>
+</g>
+<path d="M25.4419 45.3831C15.8386 45.3831 8.04456 53.1772 8.04456 62.7805C8.04456 72.3838 15.8386 80.1778 25.4419 80.1778C35.0452 80.1778 42.8392 72.3838 42.8392 62.7805C42.8392 53.1772 35.0452 45.3831 25.4419 45.3831ZM25.4419 48.8626C30.5915 48.8626 35.08 51.6636 37.4809 55.8216H25.4419C22.0668 55.8216 19.2658 58.2224 18.6221 61.4061L14.4816 54.221C17.0216 50.9677 20.9882 48.8626 25.4419 48.8626ZM30.6611 62.7805C30.6611 65.6685 28.3299 67.9997 25.4419 67.9997C22.5539 67.9997 20.2227 65.6685 20.2227 62.7805C20.2227 59.8925 22.5539 57.5613 25.4419 57.5613C28.3299 57.5613 30.6611 59.8925 30.6611 62.7805ZM11.524 62.7805C11.524 60.2405 12.2199 57.8744 13.4029 55.839L19.4224 66.2774L19.4398 66.26C20.6402 68.3302 22.8671 69.7394 25.4419 69.7394C26.2248 69.7394 26.9729 69.5829 27.6862 69.3393L23.5282 76.5592C16.7432 75.6197 11.524 69.809 11.524 62.7805ZM25.4419 76.6984L31.4614 66.26L31.4266 66.2426C32.0355 65.2161 32.4008 64.0505 32.4008 62.7805C32.4008 60.6928 31.4614 58.8313 30 57.5613H38.3333C38.9944 59.1792 39.3598 60.9364 39.3598 62.7805C39.3598 70.4701 33.1315 76.6984 25.4419 76.6984Z" fill="#DDEAFD"/>
+</g>
+<g clip-path="url(#clip3)">
+<rect x="80" y="7" width="82" height="73" fill="#8AB4F8"/>
+<g style="mix-blend-mode:luminosity" opacity="0.4" clip-path="url(#clip4)">
+<path d="M118.962 78.1577C120.393 87.1235 120.393 96.2594 118.962 105.225" stroke="#C39766" stroke-width="7.21803" stroke-miterlimit="10"/>
+<path d="M111.714 61.6314C114.722 64.8344 117.443 70.5487 118.962 78.1727" stroke="#E94235" stroke-width="10.406" stroke-linejoin="round"/>
+<path d="M77.7142 78.6239C80.3909 66.3683 84.7067 60.9999 84.8571 60.8344" stroke="#E94235" stroke-width="10.406" stroke-linejoin="round"/>
+<path d="M75.9699 105.436C75.4614 96.4408 76.0471 87.4174 77.7142 78.5637" stroke="#C39766" stroke-width="7.21803" stroke-miterlimit="10"/>
+<path d="M113.143 97.4959C106.12 104.308 95.3834 105.782 82.0902 104.158L85.0977 57.9773H113.143V97.4959Z" fill="#E94235"/>
+<path d="M84.8571 60.8345C94.2556 50.8044 105.91 55.481 111.714 61.6314" stroke="#E94235" stroke-width="10.406" stroke-linejoin="round"/>
+<path d="M92.015 65.8871H104.511V70.3231H92.015V65.8871Z" fill="#F28B82"/>
+<path d="M92.015 72.2179H104.511V76.654H92.015V72.2179Z" fill="#F28B82"/>
+<path d="M98.1202 61.6314C94.3165 61.6314 91.233 58.5479 91.233 54.7442C91.233 50.9405 94.3165 47.857 98.1202 47.857C101.924 47.857 105.007 50.9405 105.007 54.7442C105.007 58.5479 101.924 61.6314 98.1202 61.6314Z" fill="#D93025"/>
+<path d="M98.2255 38.6541C96.5222 39.5151 94.8703 40.474 93.2781 41.5262V54.6389C93.3479 55.9059 93.9004 57.0979 94.822 57.9701C95.7435 58.8422 96.9642 59.3284 98.233 59.3284C99.5018 59.3284 100.722 58.8422 101.644 57.9701C102.566 57.0979 103.118 55.9059 103.188 54.6389V41.5262C103.188 41.5262 98.3608 38.5338 98.2255 38.6541Z" fill="#A8805B"/>
+<path d="M67.7143 51.5412C72.0301 52.0073 72.812 48.9397 73.5489 45.2255C74.4812 40.5488 76.2556 27.421 78.3007 21.1654C78.421 20.6842 78.5413 20.2781 78.6165 20.0074C79.6842 15.9774 86.0601 15.4962 87.7744 18.5037C88.8871 20.4135 82.6917 21.9172 83.2631 24.0676C85.218 31.5112 87.3082 43.451 86.842 46.0826C86.2105 49.7067 84.7067 53.7668 81.4586 55.4811C70.0752 61.5111 67.5489 51.5261 67.7143 51.5412Z" fill="#202124"/>
+<path d="M84.6315 35.1503C84.6531 37.0513 85.0492 38.9294 85.7972 40.6773C86.5451 42.4251 87.6303 44.0084 88.9906 45.3366C90.3508 46.6647 91.9596 47.7117 93.7248 48.4177C95.49 49.1237 97.3771 49.4748 99.2781 49.451C103.113 49.4035 106.773 47.8448 109.465 45.1136C112.157 42.3823 113.662 38.6993 113.654 34.8645V27.3458C113.616 23.5011 112.052 19.829 109.307 17.1372C106.562 14.4454 102.86 12.9545 99.0149 12.9924C95.1703 13.0303 91.4982 14.5939 88.8064 17.3392C86.1146 20.0846 84.6237 23.7868 84.6616 27.6315L84.6315 35.1503Z" fill="#C39766"/>
+<path d="M90.9022 46.9096C88.9854 45.6013 87.4139 43.8482 86.3219 41.8004C85.2299 39.7526 84.6499 37.4709 84.6315 35.1503L84.4661 31.5713L84.7669 25.5563C86.0451 16.5338 95.9097 14.4886 95.6541 17.2405C95.6541 17.6315 87.9548 18.248 88.03 26.263V33.7818C88.0697 37.6133 89.6279 41.2725 92.3625 43.9564C95.0972 46.6403 98.7849 48.1296 102.616 48.0976C103.283 48.0215 103.957 48.1416 104.556 48.4434C102.332 49.336 99.9226 49.6659 97.5407 49.4035C95.1588 49.1412 92.8785 48.2948 90.9022 46.9397V46.9096Z" fill="#A8805B"/>
+<path d="M98.9924 13H99.5638C99.4909 16.8208 98.2997 20.5364 96.1376 23.6874C93.9754 26.8384 90.9371 29.2866 87.3984 30.7293C86.4533 31.1236 85.4776 31.4404 84.4811 31.6766L84.2857 27.4511C84.345 23.5926 85.9215 19.9127 88.674 17.208C91.4265 14.5034 95.1335 12.9916 98.9924 13V13Z" fill="#202124"/>
+<path d="M90.7969 15.5112C93.2306 13.9039 96.076 13.032 98.9924 13C102.758 12.9498 106.395 14.3701 109.13 16.9591C111.865 19.5481 113.483 23.1017 113.639 26.8646C109.104 27.9637 104.327 27.4277 100.149 25.3509C95.9704 23.2741 92.6588 19.7897 90.7969 15.5112V15.5112Z" fill="#202124"/>
+<path d="M81.7293 32.4435C81.7293 33.0384 81.9057 33.6199 82.2361 34.1144C82.5666 34.609 83.0363 34.9944 83.5859 35.2221C84.1354 35.4497 84.7401 35.5093 85.3235 35.3932C85.9069 35.2772 86.4428 34.9907 86.8634 34.5701C87.284 34.1495 87.5705 33.6136 87.6865 33.0302C87.8026 32.4468 87.743 31.8422 87.5154 31.2926C87.2877 30.743 86.9023 30.2733 86.4077 29.9429C85.9131 29.6124 85.3316 29.436 84.7368 29.436C83.9391 29.436 83.1742 29.7528 82.6102 30.3169C82.0462 30.8809 81.7293 31.6459 81.7293 32.4435Z" fill="#A8805B"/>
+<path d="M106.827 39.6314C106.282 40.0577 105.654 40.3661 104.984 40.537C104.313 40.7078 103.615 40.7375 102.932 40.624C102.05 40.4641 101.226 40.0752 100.541 39.4962L106.827 39.6314Z" stroke="#E94235" stroke-width="0.646615" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M97.3082 22.0826C95.9097 30.3683 87.7894 33.872 87.7894 33.872C87.7894 33.872 92.9924 28.5488 93.4886 22.1728C93.8345 17.9473 97.8946 18.5638 97.3082 22.0826Z" fill="#202124"/>
+<path d="M95.8195 32.248C95.985 31.7508 96.3029 31.3182 96.7279 31.0117C97.153 30.7052 97.6638 30.5403 98.1879 30.5403C98.7119 30.5403 99.2227 30.7052 99.6478 31.0117C100.073 31.3182 100.391 31.7508 100.556 32.248" stroke="#3C4043" stroke-width="0.766915" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M107.338 32.1127C107.502 31.6138 107.817 31.1787 108.241 30.8686C108.664 30.5584 109.174 30.3887 109.699 30.3834C110.224 30.377 110.738 30.5363 111.167 30.8386C111.596 31.141 111.919 31.5711 112.09 32.0676" stroke="#3C4043" stroke-width="0.766915" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g style="mix-blend-mode:luminosity" opacity="0.4" clip-path="url(#clip5)">
+<path d="M118.962 78.1577C120.393 87.1235 120.393 96.2594 118.962 105.225" stroke="#C39766" stroke-width="7.21803" stroke-miterlimit="10"/>
+<path d="M111.714 61.6314C114.722 64.8344 117.443 70.5487 118.962 78.1727" stroke="#E94235" stroke-width="10.406" stroke-linejoin="round"/>
+<path d="M77.7142 78.6239C80.3909 66.3683 84.7067 60.9999 84.8571 60.8344" stroke="#E94235" stroke-width="10.406" stroke-linejoin="round"/>
+<path d="M75.9699 105.436C75.4614 96.4408 76.0471 87.4174 77.7142 78.5637" stroke="#C39766" stroke-width="7.21803" stroke-miterlimit="10"/>
+<path d="M113.143 97.4959C106.12 104.308 95.3834 105.782 82.0902 104.158L85.0977 57.9773H113.143V97.4959Z" fill="#E94235"/>
+<path d="M84.8571 60.8345C94.2556 50.8044 105.91 55.481 111.714 61.6314" stroke="#E94235" stroke-width="10.406" stroke-linejoin="round"/>
+<path d="M92.015 65.8871H104.511V70.3231H92.015V65.8871Z" fill="#F28B82"/>
+<path d="M92.015 72.2179H104.511V76.654H92.015V72.2179Z" fill="#F28B82"/>
+<path d="M98.1202 61.6314C94.3165 61.6314 91.233 58.5479 91.233 54.7442C91.233 50.9405 94.3165 47.857 98.1202 47.857C101.924 47.857 105.007 50.9405 105.007 54.7442C105.007 58.5479 101.924 61.6314 98.1202 61.6314Z" fill="#D93025"/>
+<path d="M98.2255 38.6541C96.5222 39.5151 94.8703 40.474 93.2781 41.5262V54.6389C93.3479 55.9059 93.9004 57.0979 94.822 57.9701C95.7435 58.8422 96.9642 59.3284 98.233 59.3284C99.5018 59.3284 100.722 58.8422 101.644 57.9701C102.566 57.0979 103.118 55.9059 103.188 54.6389V41.5262C103.188 41.5262 98.3608 38.5338 98.2255 38.6541Z" fill="#A8805B"/>
+<path d="M67.7143 51.5412C72.0301 52.0073 72.812 48.9397 73.5489 45.2255C74.4812 40.5488 76.2556 27.421 78.3007 21.1654C78.421 20.6842 78.5413 20.2781 78.6165 20.0074C79.6842 15.9774 86.0601 15.4962 87.7744 18.5037C88.8871 20.4135 82.6917 21.9172 83.2631 24.0676C85.218 31.5112 87.3082 43.451 86.842 46.0826C86.2105 49.7067 84.7067 53.7668 81.4586 55.4811C70.0752 61.5111 67.5489 51.5261 67.7143 51.5412Z" fill="#202124"/>
+<path d="M84.6315 35.1503C84.6531 37.0513 85.0492 38.9294 85.7972 40.6773C86.5451 42.4251 87.6303 44.0084 88.9906 45.3366C90.3508 46.6647 91.9596 47.7117 93.7248 48.4177C95.49 49.1237 97.3771 49.4748 99.2781 49.451C103.113 49.4035 106.773 47.8448 109.465 45.1136C112.157 42.3823 113.662 38.6993 113.654 34.8645V27.3458C113.616 23.5011 112.052 19.829 109.307 17.1372C106.562 14.4454 102.86 12.9545 99.0149 12.9924C95.1703 13.0303 91.4982 14.5939 88.8064 17.3392C86.1146 20.0846 84.6237 23.7868 84.6616 27.6315L84.6315 35.1503Z" fill="#C39766"/>
+<path d="M90.9022 46.9096C88.9854 45.6013 87.4139 43.8482 86.3219 41.8004C85.2299 39.7526 84.6499 37.4709 84.6315 35.1503L84.4661 31.5713L84.7669 25.5563C86.0451 16.5338 95.9097 14.4886 95.6541 17.2405C95.6541 17.6315 87.9548 18.248 88.03 26.263V33.7818C88.0697 37.6133 89.6279 41.2725 92.3625 43.9564C95.0972 46.6403 98.7849 48.1296 102.616 48.0976C103.283 48.0215 103.957 48.1416 104.556 48.4434C102.332 49.336 99.9226 49.6659 97.5407 49.4035C95.1588 49.1412 92.8785 48.2948 90.9022 46.9397V46.9096Z" fill="#A8805B"/>
+<path d="M98.9924 13H99.5638C99.4909 16.8208 98.2997 20.5364 96.1376 23.6874C93.9754 26.8384 90.9371 29.2866 87.3984 30.7293C86.4533 31.1236 85.4776 31.4404 84.4811 31.6766L84.2857 27.4511C84.345 23.5926 85.9215 19.9127 88.674 17.208C91.4265 14.5034 95.1335 12.9916 98.9924 13V13Z" fill="#202124"/>
+<path d="M90.7969 15.5112C93.2306 13.9039 96.076 13.032 98.9924 13C102.758 12.9498 106.395 14.3701 109.13 16.9591C111.865 19.5481 113.483 23.1017 113.639 26.8646C109.104 27.9637 104.327 27.4277 100.149 25.3509C95.9704 23.2741 92.6588 19.7897 90.7969 15.5112V15.5112Z" fill="#202124"/>
+<path d="M81.7293 32.4435C81.7293 33.0384 81.9057 33.6199 82.2361 34.1144C82.5666 34.609 83.0363 34.9944 83.5859 35.2221C84.1354 35.4497 84.7401 35.5093 85.3235 35.3932C85.9069 35.2772 86.4428 34.9907 86.8634 34.5701C87.284 34.1495 87.5705 33.6136 87.6865 33.0302C87.8026 32.4468 87.743 31.8422 87.5154 31.2926C87.2877 30.743 86.9023 30.2733 86.4077 29.9429C85.9131 29.6124 85.3316 29.436 84.7368 29.436C83.9391 29.436 83.1742 29.7528 82.6102 30.3169C82.0462 30.8809 81.7293 31.6459 81.7293 32.4435Z" fill="#A8805B"/>
+<path d="M106.827 39.6314C106.282 40.0577 105.654 40.3661 104.984 40.537C104.313 40.7078 103.615 40.7375 102.932 40.624C102.05 40.4641 101.226 40.0752 100.541 39.4962L106.827 39.6314Z" stroke="#E94235" stroke-width="0.646615" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M97.3082 22.0826C95.9097 30.3683 87.7894 33.872 87.7894 33.872C87.7894 33.872 92.9924 28.5488 93.4886 22.1728C93.8345 17.9473 97.8946 18.5638 97.3082 22.0826Z" fill="#202124"/>
+<path d="M95.8195 32.248C95.985 31.7508 96.3029 31.3182 96.7279 31.0117C97.153 30.7052 97.6638 30.5403 98.1879 30.5403C98.7119 30.5403 99.2227 30.7052 99.6478 31.0117C100.073 31.3182 100.391 31.7508 100.556 32.248" stroke="#3C4043" stroke-width="0.766915" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M107.338 32.1127C107.502 31.6138 107.817 31.1787 108.241 30.8686C108.664 30.5584 109.174 30.3887 109.699 30.3834C110.224 30.377 110.738 30.5363 111.167 30.8386C111.596 31.141 111.919 31.5711 112.09 32.0676" stroke="#3C4043" stroke-width="0.766915" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<circle cx="131" cy="44" r="15" fill="#3E669C"/>
+<path d="M127 48.2338V39.7662C127 38.9889 127.848 38.5088 128.514 38.9087L135.571 43.1425C136.218 43.5309 136.218 44.4691 135.571 44.8575L128.514 49.0913C127.848 49.4912 127 49.0111 127 48.2338Z" fill="#DDEAFD"/>
+<rect x="95" y="72" width="49" height="3" fill="#AECBFA"/>
+<rect x="85" y="66" width="68" height="9" rx="2" fill="#3E669C"/>
+<path d="M88 73V68L92 70.5L88 73Z" fill="#DDEAFD"/>
+<rect x="102" y="70" width="48" height="1" fill="#DDEAFD"/>
+<rect x="94" y="68" width="5" height="5" fill="#DDEAFD"/>
+<circle cx="116.5" cy="70.5" r="2.5" fill="#DDEAFD"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="144" height="92" rx="8" fill="white"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="84.8837" height="98.6487" fill="white" transform="translate(-17 6)"/>
+</clipPath>
+<clipPath id="clip2">
+<rect x="-16.3118" y="21.0267" width="83.5072" height="83.5072" rx="2.2368" fill="white"/>
+</clipPath>
+<clipPath id="clip3">
+<rect x="80" y="7" width="82" height="73" rx="8" fill="white"/>
+</clipPath>
+<clipPath id="clip4">
+<rect width="60.06" height="159.789" fill="white" transform="matrix(-1 0 0 1 124.06 13)"/>
+</clipPath>
+<clipPath id="clip5">
+<rect width="60.06" height="159.789" fill="white" transform="matrix(-1 0 0 1 124.06 13)"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/core/common/CharacterIdMap.ts

@@ -3,31 +3,31 @@
 // found in the LICENSE file.
 
 export class CharacterIdMap<T> {
-  private readonly elementToCharacter: Map<T, string>;
-  private readonly characterToElement: Map<string, T>;
-  private charCode: number;
+  readonly #elementToCharacter: Map<T, string>;
+  readonly #characterToElement: Map<string, T>;
+  #charCode: number;
 
   constructor() {
-    this.elementToCharacter = new Map();
-    this.characterToElement = new Map();
-    this.charCode = 33;
+    this.#elementToCharacter = new Map();
+    this.#characterToElement = new Map();
+    this.#charCode = 33;
   }
 
   toChar(object: T): string {
-    let character = this.elementToCharacter.get(object);
+    let character = this.#elementToCharacter.get(object);
     if (!character) {
-      if (this.charCode >= 0xFFFF) {
+      if (this.#charCode >= 0xFFFF) {
         throw new Error('CharacterIdMap ran out of capacity!');
       }
-      character = String.fromCharCode(this.charCode++);
-      this.elementToCharacter.set(object, character);
-      this.characterToElement.set(character, object);
+      character = String.fromCharCode(this.#charCode++);
+      this.#elementToCharacter.set(object, character);
+      this.#characterToElement.set(character, object);
     }
     return character;
   }
 
   fromChar(character: string): T|null {
-    const object = this.characterToElement.get(character);
+    const object = this.#characterToElement.get(character);
     if (object === undefined) {
       return null;
     }

package/front_end/core/common/Color.ts

@@ -36,30 +36,30 @@ import * as Platform from '../platform/platform.js';
 import {blendColors, contrastRatioAPCA, desiredLuminanceAPCA, luminance, luminanceAPCA, rgbaToHsla} from './ColorUtils.js';
 
 export class Color {
-  private hslaInternal: number[]|undefined;
-  private rgbaInternal: number[];
-  private originalText: string|null;
-  private readonly originalTextIsValid: boolean;
-  private formatInternal: Format;
+  #hslaInternal: number[]|undefined;
+  #rgbaInternal: number[];
+  #originalText: string|null;
+  readonly #originalTextIsValid: boolean;
+  #formatInternal: Format;
 
   constructor(rgba: number[], format: Format, originalText?: string) {
-    this.hslaInternal = undefined;
-    this.rgbaInternal = rgba;
-    this.originalText = originalText || null;
-    this.originalTextIsValid = Boolean(this.originalText);
-    this.formatInternal = format;
-    if (typeof this.rgbaInternal[3] === 'undefined') {
-      this.rgbaInternal[3] = 1;
+    this.#hslaInternal = undefined;
+    this.#rgbaInternal = rgba;
+    this.#originalText = originalText || null;
+    this.#originalTextIsValid = Boolean(this.#originalText);
+    this.#formatInternal = format;
+    if (typeof this.#rgbaInternal[3] === 'undefined') {
+      this.#rgbaInternal[3] = 1;
     }
 
     for (let i = 0; i < 4; ++i) {
-      if (this.rgbaInternal[i] < 0) {
-        this.rgbaInternal[i] = 0;
-        this.originalTextIsValid = false;
+      if (this.#rgbaInternal[i] < 0) {
+        this.#rgbaInternal[i] = 0;
+        this.#originalTextIsValid = false;
       }
-      if (this.rgbaInternal[i] > 1) {
-        this.rgbaInternal[i] = 1;
-        this.originalTextIsValid = false;
+      if (this.#rgbaInternal[i] > 1) {
+        this.#rgbaInternal[i] = 1;
+        this.#originalTextIsValid = false;
       }
     }
   }
@@ -100,8 +100,8 @@ export class Color {
         const rgba = Nicknames.get(nickname);
         if (rgba !== undefined) {
           const color = Color.fromRGBA(rgba);
-          color.formatInternal = Format.Nickname;
-          color.originalText = text;
+          color.#formatInternal = Format.Nickname;
+          color.#originalText = text;
           return color;
         }
         return null;
@@ -448,17 +448,17 @@ export class Color {
   }
 
   format(): Format {
-    return this.formatInternal;
+    return this.#formatInternal;
   }
 
   /** HSLA with components within [0..1]
      */
   hsla(): number[] {
-    if (this.hslaInternal) {
-      return this.hslaInternal;
+    if (this.#hslaInternal) {
+      return this.#hslaInternal;
     }
-    this.hslaInternal = rgbaToHsla(this.rgbaInternal);
-    return this.hslaInternal;
+    this.#hslaInternal = rgbaToHsla(this.#rgbaInternal);
+    return this.#hslaInternal;
   }
 
   canonicalHSLA(): number[] {
@@ -479,13 +479,13 @@ export class Color {
   }
 
   hasAlpha(): boolean {
-    return this.rgbaInternal[3] !== 1;
+    return this.#rgbaInternal[3] !== 1;
   }
 
   detectHEXFormat(): Format {
     let canBeShort = true;
     for (let i = 0; i < 4; ++i) {
-      const c = Math.round(this.rgbaInternal[i] * 255);
+      const c = Math.round(this.#rgbaInternal[i] * 255);
       if (c % 17) {
         canBeShort = false;
         break;
@@ -501,12 +501,12 @@ export class Color {
   }
 
   asString(format?: string|null): string|null {
-    if (format === this.formatInternal && this.originalTextIsValid) {
-      return this.originalText;
+    if (format === this.#formatInternal && this.#originalTextIsValid) {
+      return this.#originalText;
     }
 
     if (!format) {
-      format = this.formatInternal;
+      format = this.#formatInternal;
     }
 
     function toRgbValue(value: number): number {
@@ -524,15 +524,15 @@ export class Color {
 
     switch (format) {
       case Format.Original: {
-        return this.originalText;
+        return this.#originalText;
       }
       case Format.RGB:
       case Format.RGBA: {
         const start = Platform.StringUtilities.sprintf(
-            'rgb(%d %d %d', toRgbValue(this.rgbaInternal[0]), toRgbValue(this.rgbaInternal[1]),
-            toRgbValue(this.rgbaInternal[2]));
+            'rgb(%d %d %d', toRgbValue(this.#rgbaInternal[0]), toRgbValue(this.#rgbaInternal[1]),
+            toRgbValue(this.#rgbaInternal[2]));
         if (this.hasAlpha()) {
-          return start + Platform.StringUtilities.sprintf(' / %d%)', Math.round(this.rgbaInternal[3] * 100));
+          return start + Platform.StringUtilities.sprintf(' / %d%)', Math.round(this.#rgbaInternal[3] * 100));
         }
         return start + ')';
       }
@@ -549,8 +549,8 @@ export class Color {
       case Format.HEXA: {
         return Platform.StringUtilities
             .sprintf(
-                '#%s%s%s%s', toHexValue(this.rgbaInternal[0]), toHexValue(this.rgbaInternal[1]),
-                toHexValue(this.rgbaInternal[2]), toHexValue(this.rgbaInternal[3]))
+                '#%s%s%s%s', toHexValue(this.#rgbaInternal[0]), toHexValue(this.#rgbaInternal[1]),
+                toHexValue(this.#rgbaInternal[2]), toHexValue(this.#rgbaInternal[3]))
             .toLowerCase();
       }
       case Format.HEX: {
@@ -559,8 +559,8 @@ export class Color {
         }
         return Platform.StringUtilities
             .sprintf(
-                '#%s%s%s', toHexValue(this.rgbaInternal[0]), toHexValue(this.rgbaInternal[1]),
-                toHexValue(this.rgbaInternal[2]))
+                '#%s%s%s', toHexValue(this.#rgbaInternal[0]), toHexValue(this.#rgbaInternal[1]),
+                toHexValue(this.#rgbaInternal[2]))
             .toLowerCase();
       }
       case Format.ShortHEXA: {
@@ -570,8 +570,8 @@ export class Color {
         }
         return Platform.StringUtilities
             .sprintf(
-                '#%s%s%s%s', toShortHexValue(this.rgbaInternal[0]), toShortHexValue(this.rgbaInternal[1]),
-                toShortHexValue(this.rgbaInternal[2]), toShortHexValue(this.rgbaInternal[3]))
+                '#%s%s%s%s', toShortHexValue(this.#rgbaInternal[0]), toShortHexValue(this.#rgbaInternal[1]),
+                toShortHexValue(this.#rgbaInternal[2]), toShortHexValue(this.#rgbaInternal[3]))
             .toLowerCase();
       }
       case Format.ShortHEX: {
@@ -583,8 +583,8 @@ export class Color {
         }
         return Platform.StringUtilities
             .sprintf(
-                '#%s%s%s', toShortHexValue(this.rgbaInternal[0]), toShortHexValue(this.rgbaInternal[1]),
-                toShortHexValue(this.rgbaInternal[2]))
+                '#%s%s%s', toShortHexValue(this.#rgbaInternal[0]), toShortHexValue(this.#rgbaInternal[1]),
+                toShortHexValue(this.#rgbaInternal[2]))
             .toLowerCase();
       }
       case Format.Nickname: {
@@ -592,19 +592,19 @@ export class Color {
       }
     }
 
-    return this.originalText;
+    return this.#originalText;
   }
 
   rgba(): number[] {
-    return this.rgbaInternal.slice();
+    return this.#rgbaInternal.slice();
   }
 
   canonicalRGBA(): number[] {
     const rgba = new Array(4);
     for (let i = 0; i < 3; ++i) {
-      rgba[i] = Math.round(this.rgbaInternal[i] * 255);
+      rgba[i] = Math.round(this.#rgbaInternal[i] * 255);
     }
-    rgba[3] = this.rgbaInternal[3];
+    rgba[3] = this.#rgbaInternal[3];
     return rgba;
   }
 
@@ -635,32 +635,32 @@ export class Color {
 
   invert(): Color {
     const rgba = [];
-    rgba[0] = 1 - this.rgbaInternal[0];
-    rgba[1] = 1 - this.rgbaInternal[1];
-    rgba[2] = 1 - this.rgbaInternal[2];
-    rgba[3] = this.rgbaInternal[3];
+    rgba[0] = 1 - this.#rgbaInternal[0];
+    rgba[1] = 1 - this.#rgbaInternal[1];
+    rgba[2] = 1 - this.#rgbaInternal[2];
+    rgba[3] = this.#rgbaInternal[3];
     return new Color(rgba, Format.RGBA);
   }
 
   setAlpha(alpha: number): Color {
-    const rgba = this.rgbaInternal.slice();
+    const rgba = this.#rgbaInternal.slice();
     rgba[3] = alpha;
     return new Color(rgba, Format.RGBA);
   }
 
   blendWith(fgColor: Color): Color {
-    const rgba: number[] = blendColors(fgColor.rgbaInternal, this.rgbaInternal);
+    const rgba: number[] = blendColors(fgColor.#rgbaInternal, this.#rgbaInternal);
     return new Color(rgba, Format.RGBA);
   }
 
   blendWithAlpha(alpha: number): Color {
-    const rgba = this.rgbaInternal.slice();
+    const rgba = this.#rgbaInternal.slice();
     rgba[3] *= alpha;
     return new Color(rgba, Format.RGBA);
   }
 
   setFormat(format: Format): void {
-    this.formatInternal = format;
+    this.#formatInternal = format;
   }
 }
 
@@ -882,27 +882,27 @@ export const IsolationModeHighlight = {
 };
 
 export class Generator {
-  private readonly hueSpace: number|{
+  readonly #hueSpace: number|{
     min: number,
     max: number,
     count: (number|undefined),
   };
-  private readonly satSpace: number|{
+  readonly #satSpace: number|{
     min: number,
     max: number,
     count: (number|undefined),
   };
-  private readonly lightnessSpace: number|{
+  readonly #lightnessSpace: number|{
     min: number,
     max: number,
     count: (number|undefined),
   };
-  private readonly alphaSpace: number|{
+  readonly #alphaSpace: number|{
     min: number,
     max: number,
     count: (number|undefined),
   };
-  private readonly colors: Map<string, string>;
+  readonly #colors: Map<string, string>;
   constructor(
       hueSpace?: number|{
         min: number,
@@ -924,32 +924,32 @@ export class Generator {
         max: number,
         count: (number|undefined),
       }) {
-    this.hueSpace = hueSpace || {min: 0, max: 360, count: undefined};
-    this.satSpace = satSpace || 67;
-    this.lightnessSpace = lightnessSpace || 80;
-    this.alphaSpace = alphaSpace || 1;
-    this.colors = new Map();
+    this.#hueSpace = hueSpace || {min: 0, max: 360, count: undefined};
+    this.#satSpace = satSpace || 67;
+    this.#lightnessSpace = lightnessSpace || 80;
+    this.#alphaSpace = alphaSpace || 1;
+    this.#colors = new Map();
   }
 
   setColorForID(id: string, color: string): void {
-    this.colors.set(id, color);
+    this.#colors.set(id, color);
   }
 
   colorForID(id: string): string {
-    let color = this.colors.get(id);
+    let color = this.#colors.get(id);
     if (!color) {
       color = this.generateColorForID(id);
-      this.colors.set(id, color);
+      this.#colors.set(id, color);
     }
     return color;
   }
 
   private generateColorForID(id: string): string {
     const hash = Platform.StringUtilities.hashCode(id);
-    const h = this.indexToValueInSpace(hash, this.hueSpace);
-    const s = this.indexToValueInSpace(hash >> 8, this.satSpace);
-    const l = this.indexToValueInSpace(hash >> 16, this.lightnessSpace);
-    const a = this.indexToValueInSpace(hash >> 24, this.alphaSpace);
+    const h = this.indexToValueInSpace(hash, this.#hueSpace);
+    const s = this.indexToValueInSpace(hash >> 8, this.#satSpace);
+    const l = this.indexToValueInSpace(hash >> 16, this.#lightnessSpace);
+    const a = this.indexToValueInSpace(hash >> 24, this.#alphaSpace);
     const start = `hsl(${h}deg ${s}% ${l}%`;
     if (a !== 1) {
       return `${start} / ${Math.floor(a * 100)}%)`;

package/front_end/core/common/Console.ts

@@ -8,13 +8,13 @@ import {reveal} from './Revealer.js';
 let consoleInstance: Console;
 
 export class Console extends ObjectWrapper<EventTypes> {
-  private readonly messagesInternal: Message[];
+  readonly #messagesInternal: Message[];
   /**
    * Instantiable via the instance() factory below.
    */
   private constructor() {
     super();
-    this.messagesInternal = [];
+    this.#messagesInternal = [];
   }
 
   static instance({forceNew}: {
@@ -29,7 +29,7 @@ export class Console extends ObjectWrapper<EventTypes> {
 
   addMessage(text: string, level: MessageLevel, show?: boolean): void {
     const message = new Message(text, level || MessageLevel.Info, Date.now(), show || false);
-    this.messagesInternal.push(message);
+    this.#messagesInternal.push(message);
     this.dispatchEventToListeners(Events.MessageAdded, message);
   }
 
@@ -46,7 +46,7 @@ export class Console extends ObjectWrapper<EventTypes> {
   }
 
   messages(): Message[] {
-    return this.messagesInternal;
+    return this.#messagesInternal;
   }
 
   show(): void {

package/front_end/core/common/ParsedURL.ts

@@ -44,8 +44,8 @@ export class ParsedURL {
   folderPathComponents: string;
   lastPathComponent: string;
   readonly blobInnerScheme: string|undefined;
-  private displayNameInternal?: string;
-  private dataURLDisplayNameInternal?: string;
+  #displayNameInternal?: string;
+  #dataURLDisplayNameInternal?: string;
 
   constructor(url: string) {
     this.isValid = false;
@@ -322,8 +322,8 @@ export class ParsedURL {
   }
 
   get displayName(): string {
-    if (this.displayNameInternal) {
-      return this.displayNameInternal;
+    if (this.#displayNameInternal) {
+      return this.#displayNameInternal;
     }
 
     if (this.isDataURL()) {
@@ -336,25 +336,25 @@ export class ParsedURL {
       return this.url;
     }
 
-    this.displayNameInternal = this.lastPathComponent;
-    if (!this.displayNameInternal) {
-      this.displayNameInternal = (this.host || '') + '/';
+    this.#displayNameInternal = this.lastPathComponent;
+    if (!this.#displayNameInternal) {
+      this.#displayNameInternal = (this.host || '') + '/';
     }
-    if (this.displayNameInternal === '/') {
-      this.displayNameInternal = this.url;
+    if (this.#displayNameInternal === '/') {
+      this.#displayNameInternal = this.url;
     }
-    return this.displayNameInternal;
+    return this.#displayNameInternal;
   }
 
   dataURLDisplayName(): string {
-    if (this.dataURLDisplayNameInternal) {
-      return this.dataURLDisplayNameInternal;
+    if (this.#dataURLDisplayNameInternal) {
+      return this.#dataURLDisplayNameInternal;
     }
     if (!this.isDataURL()) {
       return '';
     }
-    this.dataURLDisplayNameInternal = Platform.StringUtilities.trimEndWithMaxLength(this.url, 20);
-    return this.dataURLDisplayNameInternal;
+    this.#dataURLDisplayNameInternal = Platform.StringUtilities.trimEndWithMaxLength(this.url, 20);
+    return this.#dataURLDisplayNameInternal;
   }
 
   isAboutBlank(): boolean {