chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (324) hide show
  1. package/docs/cookbook/release_management.md +15 -13
  2. package/docs/get_the_code.md +114 -35
  3. package/front_end/core/common/Color.ts +40 -44
  4. package/front_end/core/common/Console.ts +4 -4
  5. package/front_end/core/common/ParsedURL.ts +14 -14
  6. package/front_end/core/common/ResourceType.ts +20 -20
  7. package/front_end/core/common/SegmentedRange.ts +13 -14
  8. package/front_end/core/common/Settings.ts +4 -4
  9. package/front_end/core/common/StringOutputStream.ts +4 -4
  10. package/front_end/core/host/GdpClient.ts +38 -0
  11. package/front_end/core/host/InspectorFrontendHost.ts +4 -1
  12. package/front_end/core/host/InspectorFrontendHostAPI.ts +2 -0
  13. package/front_end/core/host/ResourceLoader.ts +2 -2
  14. package/front_end/core/host/UserMetrics.ts +0 -2
  15. package/front_end/core/protocol_client/InspectorBackend.ts +9 -9
  16. package/front_end/core/root/Runtime.ts +5 -2
  17. package/front_end/core/sdk/AccessibilityModel.ts +48 -48
  18. package/front_end/core/sdk/AnimationModel.ts +78 -79
  19. package/front_end/core/sdk/CPUProfilerModel.ts +5 -5
  20. package/front_end/core/sdk/CPUThrottlingManager.ts +17 -17
  21. package/front_end/core/sdk/CSSMatchedStyles.ts +44 -44
  22. package/front_end/core/sdk/CSSMedia.ts +22 -22
  23. package/front_end/core/sdk/CSSModel.ts +4 -4
  24. package/front_end/core/sdk/CSSProperty.ts +9 -9
  25. package/front_end/core/sdk/CSSPropertyParser.ts +1 -2
  26. package/front_end/core/sdk/CSSRule.ts +3 -3
  27. package/front_end/core/sdk/CSSStyleDeclaration.ts +27 -28
  28. package/front_end/core/sdk/CSSStyleSheetHeader.ts +13 -13
  29. package/front_end/core/sdk/CategorizedBreakpoint.ts +4 -4
  30. package/front_end/core/sdk/ChildTargetManager.ts +6 -6
  31. package/front_end/core/sdk/CompilerSourceMappingContentProvider.ts +4 -4
  32. package/front_end/core/sdk/ConsoleModel.ts +24 -24
  33. package/front_end/core/sdk/Cookie.ts +16 -16
  34. package/front_end/core/sdk/CookieParser.ts +6 -6
  35. package/front_end/core/sdk/DOMDebuggerModel.ts +88 -89
  36. package/front_end/core/sdk/DOMModel.ts +113 -113
  37. package/front_end/core/sdk/DebuggerModel.ts +102 -103
  38. package/front_end/core/sdk/EmulationModel.ts +6 -6
  39. package/front_end/core/sdk/EventBreakpointsModel.ts +5 -5
  40. package/front_end/core/sdk/HeapProfilerModel.ts +5 -5
  41. package/front_end/core/sdk/IsolateManager.ts +26 -26
  42. package/front_end/core/sdk/LayerTreeBase.ts +29 -30
  43. package/front_end/core/sdk/OverlayModel.ts +6 -6
  44. package/front_end/core/sdk/Resource.ts +43 -43
  45. package/front_end/core/sdk/ResourceTreeModel.ts +58 -61
  46. package/front_end/core/sdk/RuntimeModel.ts +12 -13
  47. package/front_end/core/sdk/SDKModel.ts +3 -3
  48. package/front_end/core/sdk/Script.ts +17 -17
  49. package/front_end/core/sdk/SecurityOriginManager.ts +14 -14
  50. package/front_end/core/sdk/ServerTiming.ts +2 -2
  51. package/front_end/core/sdk/ServiceWorkerCacheModel.ts +15 -15
  52. package/front_end/core/sdk/ServiceWorkerManager.ts +19 -24
  53. package/front_end/core/sdk/SourceMap.ts +10 -10
  54. package/front_end/core/sdk/StorageKeyManager.ts +12 -12
  55. package/front_end/core/sdk/Target.ts +33 -34
  56. package/front_end/core/sdk/TargetManager.ts +20 -20
  57. package/front_end/entrypoints/formatter_worker/AcornTokenizer.ts +8 -8
  58. package/front_end/entrypoints/formatter_worker/HTMLFormatter.ts +7 -7
  59. package/front_end/entrypoints/heap_snapshot_worker/AllocationProfile.ts +7 -7
  60. package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshot.ts +24 -24
  61. package/front_end/entrypoints/main/GlobalAiButton.ts +3 -3
  62. package/front_end/entrypoints/main/MainImpl.ts +16 -14
  63. package/front_end/entrypoints/main/main-meta.ts +1 -2
  64. package/front_end/generated/InspectorBackendCommands.js +3 -2
  65. package/front_end/generated/SupportedCSSProperties.js +20 -0
  66. package/front_end/generated/protocol-mapping.d.ts +4 -0
  67. package/front_end/generated/protocol-proxy-api.d.ts +5 -0
  68. package/front_end/generated/protocol.ts +20 -0
  69. package/front_end/models/ai_assistance/agents/PerformanceAgent.ts +15 -16
  70. package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt +127 -0
  71. package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts +149 -26
  72. package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt +6 -0
  73. package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts +9 -10
  74. package/front_end/models/badges/AiExplorerBadge.ts +21 -0
  75. package/front_end/models/badges/Badge.ts +3 -5
  76. package/front_end/models/badges/CodeWhispererBadge.ts +21 -0
  77. package/front_end/models/badges/DOMDetectiveBadge.ts +4 -3
  78. package/front_end/models/badges/SpeedsterBadge.ts +6 -4
  79. package/front_end/models/badges/StarterBadge.ts +4 -3
  80. package/front_end/models/badges/UserBadges.ts +29 -3
  81. package/front_end/models/bindings/CSSWorkspaceBinding.ts +6 -6
  82. package/front_end/models/bindings/DebuggerLanguagePlugins.ts +18 -18
  83. package/front_end/models/bindings/FileUtils.ts +15 -15
  84. package/front_end/models/bindings/ResourceScriptMapping.ts +14 -14
  85. package/front_end/models/elements/ElementUpdateRecord.ts +11 -11
  86. package/front_end/models/emulation/DeviceModeModel.ts +123 -131
  87. package/front_end/models/emulation/EmulatedDevices.ts +22 -22
  88. package/front_end/models/extensions/ExtensionPanel.ts +24 -24
  89. package/front_end/models/extensions/ExtensionServer.ts +4 -4
  90. package/front_end/models/javascript_metadata/NativeFunctions.js +14 -2
  91. package/front_end/models/persistence/IsolatedFileSystem.ts +18 -19
  92. package/front_end/models/persistence/IsolatedFileSystemManager.ts +13 -13
  93. package/front_end/models/trace/EventsSerializer.ts +5 -5
  94. package/front_end/models/trace/LanternComputationData.ts +10 -10
  95. package/front_end/models/trace/ModelImpl.ts +32 -41
  96. package/front_end/models/trace/Processor.ts +28 -30
  97. package/front_end/models/trace/extras/FilmStrip.ts +6 -6
  98. package/front_end/models/trace/extras/StackTraceForEvent.ts +22 -25
  99. package/front_end/models/trace/extras/ThirdParties.ts +16 -17
  100. package/front_end/models/trace/extras/TraceFilter.ts +1 -1
  101. package/front_end/models/trace/handlers/Threads.ts +10 -10
  102. package/front_end/models/trace/handlers/helpers.ts +9 -9
  103. package/front_end/models/trace/handlers/types.ts +3 -3
  104. package/front_end/models/trace/insights/CLSCulprits.ts +12 -14
  105. package/front_end/models/trace/insights/Cache.ts +8 -4
  106. package/front_end/models/trace/insights/DOMSize.ts +8 -5
  107. package/front_end/models/trace/insights/DocumentLatency.ts +2 -2
  108. package/front_end/models/trace/insights/DuplicatedJavaScript.ts +3 -3
  109. package/front_end/models/trace/insights/FontDisplay.ts +3 -4
  110. package/front_end/models/trace/insights/ForcedReflow.ts +3 -3
  111. package/front_end/models/trace/insights/INPBreakdown.ts +2 -2
  112. package/front_end/models/trace/insights/ImageDelivery.ts +11 -11
  113. package/front_end/models/trace/insights/LCPBreakdown.ts +4 -4
  114. package/front_end/models/trace/insights/LCPDiscovery.ts +4 -4
  115. package/front_end/models/trace/insights/LegacyJavaScript.ts +2 -2
  116. package/front_end/models/trace/insights/ModernHTTP.ts +4 -5
  117. package/front_end/models/trace/insights/NetworkDependencyTree.ts +12 -12
  118. package/front_end/models/trace/insights/RenderBlocking.ts +9 -10
  119. package/front_end/models/trace/insights/SlowCSSSelector.ts +2 -2
  120. package/front_end/models/trace/insights/ThirdParties.ts +4 -5
  121. package/front_end/models/trace/insights/Viewport.ts +8 -5
  122. package/front_end/models/trace/insights/types.ts +1 -0
  123. package/front_end/models/trace/lantern/testing/MetricTestUtils.ts +10 -10
  124. package/front_end/panels/accessibility/AXBreadcrumbsPane.ts +52 -52
  125. package/front_end/panels/accessibility/AccessibilitySidebarView.ts +8 -8
  126. package/front_end/panels/animation/AnimationTimeline.ts +5 -5
  127. package/front_end/panels/animation/AnimationUI.ts +22 -23
  128. package/front_end/panels/application/ApplicationPanelSidebar.ts +12 -12
  129. package/front_end/panels/application/DOMStorageModel.ts +23 -23
  130. package/front_end/panels/application/ExtensionStorageModel.ts +31 -31
  131. package/front_end/panels/application/IndexedDBModel.ts +1 -0
  132. package/front_end/panels/application/PreloadingTreeElement.ts +8 -8
  133. package/front_end/panels/application/ServiceWorkersView.ts +0 -53
  134. package/front_end/panels/application/preloading/components/PreloadingDisabledInfobar.ts +2 -2
  135. package/front_end/panels/application/preloading/components/UsedPreloadingView.ts +2 -2
  136. package/front_end/panels/common/BadgeNotification.ts +24 -4
  137. package/front_end/panels/common/GdpSignUpDialog.ts +5 -0
  138. package/front_end/panels/common/badgeNotification.css +26 -9
  139. package/front_end/panels/console/ConsoleContextSelector.ts +9 -9
  140. package/front_end/panels/console/ConsolePrompt.ts +8 -5
  141. package/front_end/panels/console/ConsoleView.ts +13 -13
  142. package/front_end/panels/console/ConsoleViewport.ts +29 -29
  143. package/front_end/panels/coverage/CoverageModel.ts +22 -22
  144. package/front_end/panels/elements/ClassesPaneWidget.ts +1 -1
  145. package/front_end/panels/elements/ComputedStyleModel.ts +17 -18
  146. package/front_end/panels/elements/DOMPath.ts +2 -2
  147. package/front_end/panels/elements/ElementsPanel.ts +13 -13
  148. package/front_end/panels/elements/ElementsTreeElement.ts +18 -18
  149. package/front_end/panels/elements/ElementsTreeOutline.ts +41 -48
  150. package/front_end/panels/elements/ShortcutTreeElement.ts +4 -4
  151. package/front_end/panels/elements/StylePropertiesSection.ts +4 -4
  152. package/front_end/panels/elements/StylePropertyTreeElement.ts +49 -50
  153. package/front_end/panels/elements/StylesSidebarPane.ts +19 -19
  154. package/front_end/panels/emulation/DeviceModeToolbar.ts +7 -7
  155. package/front_end/panels/emulation/DeviceModeView.ts +6 -6
  156. package/front_end/panels/emulation/MediaQueryInspector.ts +18 -18
  157. package/front_end/panels/event_listeners/EventListenersView.ts +13 -14
  158. package/front_end/panels/layer_viewer/LayerTreeOutline.ts +3 -3
  159. package/front_end/panels/layer_viewer/LayerViewHost.ts +13 -13
  160. package/front_end/panels/layer_viewer/PaintProfilerView.ts +9 -10
  161. package/front_end/panels/layer_viewer/TransformController.ts +34 -36
  162. package/front_end/panels/layers/LayerTreeModel.ts +41 -40
  163. package/front_end/panels/lighthouse/LighthouseReportSelector.ts +13 -13
  164. package/front_end/panels/lighthouse/LighthouseStartView.ts +7 -7
  165. package/front_end/panels/media/PlayerMessagesView.ts +5 -5
  166. package/front_end/panels/media/TickingFlameChart.ts +24 -24
  167. package/front_end/panels/media/TickingFlameChartHelpers.ts +32 -32
  168. package/front_end/panels/network/NetworkItemView.ts +4 -4
  169. package/front_end/panels/network/NetworkLogViewColumns.ts +29 -29
  170. package/front_end/panels/network/NetworkPanel.ts +8 -5
  171. package/front_end/panels/network/ResourceWebSocketFrameView.ts +10 -10
  172. package/front_end/panels/profiler/HeapDetachedElementsView.ts +3 -3
  173. package/front_end/panels/profiler/HeapProfileView.ts +1 -1
  174. package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts +3 -4
  175. package/front_end/panels/profiler/ProfileHeader.ts +25 -25
  176. package/front_end/panels/profiler/ProfileLauncherView.ts +5 -6
  177. package/front_end/panels/recorder/components/ReplaySection.ts +3 -1
  178. package/front_end/panels/security/OriginTreeElement.ts +8 -8
  179. package/front_end/panels/security/SecurityPanel.ts +5 -5
  180. package/front_end/panels/settings/SettingsScreen.ts +18 -12
  181. package/front_end/panels/settings/components/SyncSection.ts +20 -6
  182. package/front_end/panels/sources/AiCodeCompletionPlugin.ts +3 -0
  183. package/front_end/panels/sources/DebuggerPausedMessage.ts +8 -9
  184. package/front_end/panels/sources/NavigatorView.ts +43 -46
  185. package/front_end/panels/sources/SourcesPanel.ts +35 -35
  186. package/front_end/panels/sources/SourcesView.ts +13 -13
  187. package/front_end/panels/sources/TabbedEditorContainer.ts +19 -22
  188. package/front_end/panels/sources/UISourceCodeFrame.ts +4 -4
  189. package/front_end/panels/sources/WatchExpressionsSidebarPane.ts +34 -36
  190. package/front_end/panels/timeline/AnimationsTrackAppender.ts +3 -3
  191. package/front_end/panels/timeline/CompatibilityTracksAppender.ts +8 -8
  192. package/front_end/panels/timeline/CountersGraph.ts +16 -16
  193. package/front_end/panels/timeline/EntriesFilter.ts +4 -3
  194. package/front_end/panels/timeline/EventsTimelineTreeView.ts +3 -3
  195. package/front_end/panels/timeline/GPUTrackAppender.ts +3 -3
  196. package/front_end/panels/timeline/Initiators.ts +10 -10
  197. package/front_end/panels/timeline/InteractionsTrackAppender.ts +5 -5
  198. package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts +7 -7
  199. package/front_end/panels/timeline/ModificationsManager.ts +8 -15
  200. package/front_end/panels/timeline/TargetForEvent.ts +2 -2
  201. package/front_end/panels/timeline/ThirdPartyTreeView.ts +1 -1
  202. package/front_end/panels/timeline/ThreadAppender.ts +13 -13
  203. package/front_end/panels/timeline/TimelineDetailsView.ts +6 -14
  204. package/front_end/panels/timeline/TimelineEventOverview.ts +27 -26
  205. package/front_end/panels/timeline/TimelineFilters.ts +5 -5
  206. package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts +54 -53
  207. package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts +34 -34
  208. package/front_end/panels/timeline/TimelineFlameChartView.ts +18 -31
  209. package/front_end/panels/timeline/TimelineHistoryManager.ts +17 -18
  210. package/front_end/panels/timeline/TimelineMiniMap.ts +6 -6
  211. package/front_end/panels/timeline/TimelinePaintProfilerView.ts +6 -6
  212. package/front_end/panels/timeline/TimelinePanel.ts +52 -59
  213. package/front_end/panels/timeline/TimelineSelectorStatsView.ts +7 -5
  214. package/front_end/panels/timeline/TimelineTreeView.ts +10 -10
  215. package/front_end/panels/timeline/TimelineUIUtils.ts +43 -43
  216. package/front_end/panels/timeline/TimingsTrackAppender.ts +12 -12
  217. package/front_end/panels/timeline/TracingLayerTree.ts +43 -43
  218. package/front_end/panels/timeline/TrackConfigBanner.ts +6 -6
  219. package/front_end/panels/timeline/TrackConfiguration.ts +1 -1
  220. package/front_end/panels/timeline/components/DetailsView.ts +4 -4
  221. package/front_end/panels/timeline/components/LayoutShiftDetails.ts +12 -21
  222. package/front_end/panels/timeline/components/LiveMetricsView.ts +2 -1
  223. package/front_end/panels/timeline/components/NetworkRequestDetails.ts +5 -5
  224. package/front_end/panels/timeline/components/Sidebar.ts +4 -14
  225. package/front_end/panels/timeline/components/SidebarInsightsTab.ts +13 -36
  226. package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts +21 -19
  227. package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts +1 -1
  228. package/front_end/panels/timeline/components/insights/Cache.ts +4 -0
  229. package/front_end/panels/timeline/components/insights/DOMSize.ts +5 -1
  230. package/front_end/panels/timeline/components/insights/Helpers.ts +19 -0
  231. package/front_end/panels/timeline/components/insights/NetworkDependencyTree.ts +1 -1
  232. package/front_end/panels/timeline/components/insights/Viewport.ts +4 -0
  233. package/front_end/panels/timeline/overlays/OverlaysImpl.ts +1 -1
  234. package/front_end/panels/timeline/utils/AICallTree.ts +11 -11
  235. package/front_end/panels/timeline/utils/AIContext.ts +17 -19
  236. package/front_end/panels/timeline/utils/EntityMapper.ts +6 -5
  237. package/front_end/panels/timeline/utils/EntryName.ts +2 -2
  238. package/front_end/panels/timeline/utils/EntryNodes.ts +5 -5
  239. package/front_end/panels/timeline/utils/EntryStyles.ts +4 -4
  240. package/front_end/panels/timeline/utils/FreshRecording.ts +3 -3
  241. package/front_end/panels/timeline/utils/Helpers.ts +0 -18
  242. package/front_end/panels/timeline/utils/InsightAIContext.ts +6 -6
  243. package/front_end/panels/timeline/utils/SourceMapsResolver.ts +7 -7
  244. package/front_end/panels/webauthn/WebauthnPane.ts +1 -0
  245. package/front_end/third_party/chromium/README.chromium +1 -1
  246. package/front_end/third_party/codemirror.next/chunk/angular.js +1 -1
  247. package/front_end/third_party/codemirror.next/chunk/angular.js.map +1 -1
  248. package/front_end/third_party/codemirror.next/chunk/codemirror.js +1 -1
  249. package/front_end/third_party/codemirror.next/chunk/codemirror.js.map +1 -1
  250. package/front_end/third_party/codemirror.next/chunk/cpp.js +1 -1
  251. package/front_end/third_party/codemirror.next/chunk/cpp.js.map +1 -1
  252. package/front_end/third_party/codemirror.next/chunk/java.js +1 -1
  253. package/front_end/third_party/codemirror.next/chunk/java.js.map +1 -1
  254. package/front_end/third_party/codemirror.next/chunk/legacy.js +1 -1
  255. package/front_end/third_party/codemirror.next/chunk/legacy.js.map +1 -1
  256. package/front_end/third_party/codemirror.next/chunk/less.js +1 -1
  257. package/front_end/third_party/codemirror.next/chunk/less.js.map +1 -1
  258. package/front_end/third_party/codemirror.next/chunk/markdown.js +1 -1
  259. package/front_end/third_party/codemirror.next/chunk/markdown.js.map +1 -1
  260. package/front_end/third_party/codemirror.next/chunk/php.js +1 -1
  261. package/front_end/third_party/codemirror.next/chunk/php.js.map +1 -1
  262. package/front_end/third_party/codemirror.next/chunk/python.js +1 -1
  263. package/front_end/third_party/codemirror.next/chunk/python.js.map +1 -1
  264. package/front_end/third_party/codemirror.next/chunk/sass.js +1 -1
  265. package/front_end/third_party/codemirror.next/chunk/sass.js.map +1 -1
  266. package/front_end/third_party/codemirror.next/chunk/svelte.js +1 -1
  267. package/front_end/third_party/codemirror.next/chunk/svelte.js.map +1 -1
  268. package/front_end/third_party/codemirror.next/chunk/vue.js +1 -1
  269. package/front_end/third_party/codemirror.next/chunk/vue.js.map +1 -1
  270. package/front_end/third_party/codemirror.next/chunk/wast.js +1 -1
  271. package/front_end/third_party/codemirror.next/chunk/wast.js.map +1 -1
  272. package/front_end/third_party/codemirror.next/chunk/xml.js +1 -1
  273. package/front_end/third_party/codemirror.next/chunk/xml.js.map +1 -1
  274. package/front_end/third_party/codemirror.next/codemirror.next.js +1 -1
  275. package/front_end/third_party/codemirror.next/package.json +1 -1
  276. package/front_end/third_party/codemirror.next/rebuild.sh +1 -1
  277. package/front_end/third_party/json5/rebuild.sh +1 -1
  278. package/front_end/third_party/legacy-javascript/{update.sh → rebuild.sh} +1 -1
  279. package/front_end/third_party/lit/lib/decorators.d.ts +26 -9
  280. package/front_end/third_party/lit/lib/decorators.js +5 -5
  281. package/front_end/third_party/lit/lib/decorators.js.map +1 -1
  282. package/front_end/third_party/lit/lib/directive.js.map +1 -1
  283. package/front_end/third_party/lit/lib/directives.js +8 -13
  284. package/front_end/third_party/lit/lib/directives.js.map +1 -1
  285. package/front_end/third_party/lit/lib/lit.d.ts +26 -9
  286. package/front_end/third_party/lit/lib/lit.js +5 -5
  287. package/front_end/third_party/lit/lib/lit.js.map +1 -1
  288. package/front_end/third_party/lit/lib/static-html.js +2 -2
  289. package/front_end/third_party/lit/lib/static-html.js.map +1 -1
  290. package/front_end/third_party/lit/rebuild.sh +1 -1
  291. package/front_end/third_party/third-party-web/rebuild.sh +1 -1
  292. package/front_end/ui/components/dialogs/Dialog.ts +6 -7
  293. package/front_end/ui/legacy/ActionRegistration.ts +9 -9
  294. package/front_end/ui/legacy/DockController.ts +18 -18
  295. package/front_end/ui/legacy/FilterBar.ts +7 -7
  296. package/front_end/ui/legacy/Fragment.ts +4 -4
  297. package/front_end/ui/legacy/GlassPane.ts +12 -12
  298. package/front_end/ui/legacy/InspectorView.ts +5 -15
  299. package/front_end/ui/legacy/ListControl.ts +27 -27
  300. package/front_end/ui/legacy/ListWidget.ts +4 -4
  301. package/front_end/ui/legacy/PopoverHelper.ts +4 -4
  302. package/front_end/ui/legacy/ShortcutRegistry.ts +17 -17
  303. package/front_end/ui/legacy/TabbedPane.ts +74 -75
  304. package/front_end/ui/legacy/TextPrompt.ts +31 -31
  305. package/front_end/ui/legacy/Toolbar.ts +13 -14
  306. package/front_end/ui/legacy/ViewManager.ts +30 -31
  307. package/front_end/ui/legacy/Widget.ts +6 -6
  308. package/front_end/ui/legacy/XLink.ts +9 -9
  309. package/front_end/ui/legacy/ZoomManager.ts +9 -9
  310. package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts +27 -27
  311. package/front_end/ui/legacy/components/color_picker/ContrastInfo.ts +30 -32
  312. package/front_end/ui/legacy/components/color_picker/Spectrum.ts +15 -15
  313. package/front_end/ui/legacy/components/data_grid/DataGrid.ts +64 -64
  314. package/front_end/ui/legacy/components/data_grid/ShowMoreDataGridNode.ts +2 -2
  315. package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts +10 -11
  316. package/front_end/ui/legacy/components/perf_ui/ChartViewport.ts +12 -12
  317. package/front_end/ui/legacy/components/perf_ui/FlameChart.ts +3 -3
  318. package/front_end/ui/legacy/components/perf_ui/TimelineGrid.ts +14 -14
  319. package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts +8 -8
  320. package/front_end/ui/legacy/components/quick_open/CommandMenu.ts +5 -5
  321. package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts +4 -4
  322. package/front_end/ui/legacy/theme_support/ThemeSupport.ts +4 -4
  323. package/front_end/ui/visual_logging/KnownContextValues.ts +2 -2
  324. package/package.json +1 -1
@@ -1880,11 +1880,11 @@ export function getPropertyRenderers(
1880
1880
 
1881
1881
  export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
1882
1882
  private readonly style: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
1883
- private matchedStylesInternal: SDK.CSSMatchedStyles.CSSMatchedStyles;
1883
+ #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
1884
1884
  property: SDK.CSSProperty.CSSProperty;
1885
- private readonly inheritedInternal: boolean;
1886
- private overloadedInternal: boolean;
1887
- private parentPaneInternal: StylesSidebarPane;
1885
+ readonly #inherited: boolean;
1886
+ #overloaded: boolean;
1887
+ #parentPane: StylesSidebarPane;
1888
1888
  #parentSection: StylePropertiesSection;
1889
1889
  isShorthand: boolean;
1890
1890
  private readonly applyStyleThrottler = new Common.Throttler.Throttler(0);
@@ -1911,12 +1911,12 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
1911
1911
  const jslogContext = property.name.startsWith('--') ? 'custom-property' : property.name;
1912
1912
  super('', isShorthand, jslogContext);
1913
1913
  this.style = property.ownerStyle;
1914
- this.matchedStylesInternal = matchedStyles;
1914
+ this.#matchedStyles = matchedStyles;
1915
1915
  this.property = property;
1916
- this.inheritedInternal = inherited;
1917
- this.overloadedInternal = overloaded;
1916
+ this.#inherited = inherited;
1917
+ this.#overloaded = overloaded;
1918
1918
  this.selectable = false;
1919
- this.parentPaneInternal = stylesPane;
1919
+ this.#parentPane = stylesPane;
1920
1920
  this.#parentSection = section;
1921
1921
  this.isShorthand = isShorthand;
1922
1922
  this.newProperty = newProperty;
@@ -1933,8 +1933,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
1933
1933
  if (!SDK.CSSMetadata.cssMetadata().isGridNameAwareProperty(this.name)) {
1934
1934
  return new Set();
1935
1935
  }
1936
- for (let node = this.parentPaneInternal.node()?.parentNode; node; node = node?.parentNode) {
1937
- const style = await this.parentPaneInternal.cssModel()?.getComputedStyle(node.id);
1936
+ for (let node = this.#parentPane.node()?.parentNode; node; node = node?.parentNode) {
1937
+ const style = await this.#parentPane.cssModel()?.getComputedStyle(node.id);
1938
1938
  const display = style?.get('display');
1939
1939
  const isGrid = display === 'grid' || display === 'inline-grid';
1940
1940
  if (!isGrid) {
@@ -1967,7 +1967,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
1967
1967
  }
1968
1968
 
1969
1969
  matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles {
1970
- return this.matchedStylesInternal;
1970
+ return this.#matchedStyles;
1971
1971
  }
1972
1972
 
1973
1973
  getLonghand(): StylePropertyTreeElement|null {
@@ -1980,18 +1980,18 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
1980
1980
  }
1981
1981
 
1982
1982
  inherited(): boolean {
1983
- return this.inheritedInternal;
1983
+ return this.#inherited;
1984
1984
  }
1985
1985
 
1986
1986
  overloaded(): boolean {
1987
- return this.overloadedInternal;
1987
+ return this.#overloaded;
1988
1988
  }
1989
1989
 
1990
1990
  setOverloaded(x: boolean): void {
1991
- if (x === this.overloadedInternal) {
1991
+ if (x === this.#overloaded) {
1992
1992
  return;
1993
1993
  }
1994
- this.overloadedInternal = x;
1994
+ this.#overloaded = x;
1995
1995
  this.updateState();
1996
1996
  }
1997
1997
 
@@ -2020,7 +2020,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2020
2020
  }
2021
2021
 
2022
2022
  updateFilter(): boolean {
2023
- const regex = this.parentPaneInternal.filterRegex();
2023
+ const regex = this.#parentPane.filterRegex();
2024
2024
  const matches = regex !== null && (regex.test(this.property.name) || regex.test(this.property.value));
2025
2025
  this.listItemElement.classList.toggle('filter-match', matches);
2026
2026
 
@@ -2095,11 +2095,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2095
2095
  }
2096
2096
 
2097
2097
  node(): SDK.DOMModel.DOMNode|null {
2098
- return this.parentPaneInternal.node();
2098
+ return this.#parentPane.node();
2099
2099
  }
2100
2100
 
2101
2101
  parentPane(): StylesSidebarPane {
2102
- return this.parentPaneInternal;
2102
+ return this.#parentPane;
2103
2103
  }
2104
2104
 
2105
2105
  section(): StylePropertiesSection {
@@ -2116,14 +2116,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2116
2116
  return;
2117
2117
  }
2118
2118
 
2119
- this.parentPaneInternal.setUserOperation(true);
2119
+ this.#parentPane.setUserOperation(true);
2120
2120
  const success = await this.property.setDisabled(disabled);
2121
- this.parentPaneInternal.setUserOperation(false);
2121
+ this.#parentPane.setUserOperation(false);
2122
2122
 
2123
2123
  if (!success) {
2124
2124
  return;
2125
2125
  }
2126
- this.matchedStylesInternal.resetActiveProperties();
2126
+ this.#matchedStyles.resetActiveProperties();
2127
2127
  this.updatePane();
2128
2128
  this.styleTextAppliedForTest();
2129
2129
  }
@@ -2140,7 +2140,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2140
2140
  return staticLonghandProperties;
2141
2141
  }
2142
2142
 
2143
- const parsedLonghands = await this.parentPaneInternal.cssModel()?.agent.invoke_getLonghandProperties(
2143
+ const parsedLonghands = await this.#parentPane.cssModel()?.agent.invoke_getLonghandProperties(
2144
2144
  {shorthandName: this.property.name, value: parsedProperty});
2145
2145
  if (!parsedLonghands || parsedLonghands.getError()) {
2146
2146
  return staticLonghandProperties;
@@ -2173,7 +2173,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2173
2173
  let overloaded = false;
2174
2174
 
2175
2175
  inherited = this.#parentSection.isPropertyInherited(name);
2176
- overloaded = this.matchedStylesInternal.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.OVERLOADED;
2176
+ overloaded = this.#matchedStyles.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.OVERLOADED;
2177
2177
 
2178
2178
  const leadingProperty = leadingProperties.find(property => property.name === name && property.activeInStyle());
2179
2179
  if (leadingProperty) {
@@ -2181,9 +2181,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2181
2181
  }
2182
2182
 
2183
2183
  const item = new StylePropertyTreeElement({
2184
- stylesPane: this.parentPaneInternal,
2184
+ stylesPane: this.#parentPane,
2185
2185
  section: this.#parentSection,
2186
- matchedStyles: this.matchedStylesInternal,
2186
+ matchedStyles: this.#matchedStyles,
2187
2187
  property,
2188
2188
  isShorthand: false,
2189
2189
  inherited,
@@ -2201,7 +2201,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2201
2201
 
2202
2202
  this.listItemElement.addEventListener('mousedown', event => {
2203
2203
  if (event.button === 0) {
2204
- parentMap.set(this.parentPaneInternal, this);
2204
+ parentMap.set(this.#parentPane, this);
2205
2205
  }
2206
2206
  }, false);
2207
2207
  this.listItemElement.addEventListener('mouseup', this.mouseUp.bind(this));
@@ -2248,9 +2248,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2248
2248
  }
2249
2249
 
2250
2250
  const matching: SDK.CSSPropertyParser.BottomUpTreeMatching = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [
2251
- new SDK.CSSPropertyParserMatchers.VariableMatcher(this.matchedStylesInternal, style),
2252
- new SDK.CSSPropertyParserMatchers.AttributeMatcher(this.matchedStylesInternal, style),
2253
- new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(this.matchedStylesInternal),
2251
+ new SDK.CSSPropertyParserMatchers.VariableMatcher(this.#matchedStyles, style),
2252
+ new SDK.CSSPropertyParserMatchers.AttributeMatcher(this.#matchedStyles, style),
2253
+ new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(this.#matchedStyles),
2254
2254
  ]);
2255
2255
 
2256
2256
  const decl = SDK.CSSPropertyParser.ASTUtils.siblings(SDK.CSSPropertyParser.ASTUtils.declValue(matching.ast.tree));
@@ -2282,8 +2282,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2282
2282
 
2283
2283
  const renderers = this.property.parsedOk ?
2284
2284
  getPropertyRenderers(
2285
- this.name, this.style, this.parentPaneInternal, this.matchedStylesInternal, this,
2286
- this.getComputedStyles() ?? new Map()) :
2285
+ this.name, this.style, this.#parentPane, this.#matchedStyles, this, this.getComputedStyles() ?? new Map()) :
2287
2286
  [];
2288
2287
 
2289
2288
  if (Root.Runtime.experiments.isEnabled('font-editor') && this.property.parsedOk) {
@@ -2306,9 +2305,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2306
2305
 
2307
2306
  if (this.property.name.startsWith('--') &&
2308
2307
  !(this.property.ownerStyle.parentRule instanceof SDK.CSSRule.CSSFunctionRule)) {
2309
- const contents = this.parentPaneInternal.getVariablePopoverContents(
2308
+ const contents = this.#parentPane.getVariablePopoverContents(
2310
2309
  this.matchedStyles(), this.property.name,
2311
- this.matchedStylesInternal.computeCSSVariable(this.style, this.property.name)?.value ?? null);
2310
+ this.#matchedStyles.computeCSSVariable(this.style, this.property.name)?.value ?? null);
2312
2311
  const tooltipId = this.getTooltipId('custom-property-decl');
2313
2312
  this.nameElement.setAttribute('aria-details', tooltipId);
2314
2313
  const tooltip = new Tooltips.Tooltip.Tooltip(
@@ -2316,7 +2315,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2316
2315
  tooltip.appendChild(contents);
2317
2316
  tooltip.onbeforetoggle = (e: Event) => {
2318
2317
  if ((e as ToggleEvent).newState === 'open') {
2319
- contents.value = this.matchedStylesInternal.computeCSSVariable(this.style, this.property.name)?.value;
2318
+ contents.value = this.#matchedStyles.computeCSSVariable(this.style, this.property.name)?.value;
2320
2319
  }
2321
2320
  };
2322
2321
  this.listItemElement.appendChild(tooltip);
@@ -2339,7 +2338,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2339
2338
  return;
2340
2339
  }
2341
2340
 
2342
- const cssProperty = this.parentPaneInternal.webCustomData?.findCssProperty(this.name);
2341
+ const cssProperty = this.#parentPane.webCustomData?.findCssProperty(this.name);
2343
2342
  if (!cssProperty) {
2344
2343
  event.consume(true);
2345
2344
  return;
@@ -2376,7 +2375,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2376
2375
  // Add a separate exclamation mark IMG element with a tooltip.
2377
2376
  this.listItemElement.insertBefore(
2378
2377
  this.createExclamationMark(
2379
- this.property, this.parentPaneInternal.getVariableParserError(this.matchedStyles(), this.property.name)),
2378
+ this.property, this.#parentPane.getVariableParserError(this.matchedStyles(), this.property.name)),
2380
2379
  this.listItemElement.firstChild);
2381
2380
 
2382
2381
  // When the property is valid but the property value is invalid,
@@ -2550,7 +2549,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2550
2549
  return;
2551
2550
  }
2552
2551
 
2553
- const cssModel = this.parentPaneInternal.cssModel();
2552
+ const cssModel = this.#parentPane.cssModel();
2554
2553
  const fontFaces = cssModel?.fontFaces() || [];
2555
2554
 
2556
2555
  const localName = this.node()?.localName();
@@ -2580,8 +2579,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2580
2579
  }
2581
2580
 
2582
2581
  private mouseUp(event: MouseEvent): void {
2583
- const activeTreeElement = parentMap.get(this.parentPaneInternal);
2584
- parentMap.delete(this.parentPaneInternal);
2582
+ const activeTreeElement = parentMap.get(this.#parentPane);
2583
+ parentMap.delete(this.#parentPane);
2585
2584
  if (!activeTreeElement) {
2586
2585
  return;
2587
2586
  }
@@ -2630,7 +2629,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2630
2629
  private handleContextMenuEvent(context: Context, event: Event): void {
2631
2630
  const contextMenu = new UI.ContextMenu.ContextMenu(event);
2632
2631
  if (this.property.parsedOk && this.parent?.root) {
2633
- const sectionIndex = this.parentPaneInternal.focusedSectionIndex();
2632
+ const sectionIndex = this.#parentPane.focusedSectionIndex();
2634
2633
  contextMenu.defaultSection().appendCheckboxItem(
2635
2634
  i18nString(UIStrings.togglePropertyAndContinueEditing), async () => {
2636
2635
  if (this.treeOutline) {
@@ -2639,7 +2638,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2639
2638
  this.editingCancelled(context);
2640
2639
  await this.toggleDisabled(!this.property.disabled);
2641
2640
  event.consume();
2642
- this.parentPaneInternal.continueEditingElement(sectionIndex, propertyIndex);
2641
+ this.#parentPane.continueEditingElement(sectionIndex, propertyIndex);
2643
2642
  }
2644
2643
  }, {checked: !this.property.disabled, jslogContext: 'toggle-property-and-continue-editing'});
2645
2644
  }
@@ -2854,7 +2853,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2854
2853
 
2855
2854
  this.originalPropertyText = this.property.propertyText || '';
2856
2855
 
2857
- this.parentPaneInternal.setEditingStyle(true);
2856
+ this.#parentPane.setEditingStyle(true);
2858
2857
  selectedElement.parentElement?.scrollIntoViewIfNeeded(false);
2859
2858
 
2860
2859
  this.prompt = new CSSPropertyPrompt(this, context.isEditingName, Array.from(this.#gridNames ?? []));
@@ -2997,7 +2996,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
2997
2996
  }
2998
2997
 
2999
2998
  private async applyFreeFlowStyleTextEdit(context: Context): Promise<void> {
3000
- if (!this.prompt || !this.parentPaneInternal.node()) {
2999
+ if (!this.prompt || !this.#parentPane.node()) {
3001
3000
  return;
3002
3001
  }
3003
3002
 
@@ -3012,7 +3011,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
3012
3011
  return;
3013
3012
  }
3014
3013
  // Prevent destructive side-effects during live-edit. crbug.com/433889
3015
- const parentNode = this.parentPaneInternal.node();
3014
+ const parentNode = this.#parentPane.node();
3016
3015
  if (parentNode) {
3017
3016
  const isPseudo = Boolean(parentNode.pseudoType());
3018
3017
  if (isPseudo) {
@@ -3053,7 +3052,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
3053
3052
  editedElement.parentElement.classList.remove('child-editing');
3054
3053
  }
3055
3054
 
3056
- this.parentPaneInternal.setEditingStyle(false);
3055
+ this.#parentPane.setEditingStyle(false);
3057
3056
  }
3058
3057
 
3059
3058
  editingCancelled(context: Context): void {
@@ -3165,7 +3164,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
3165
3164
  this: StylePropertyTreeElement, alreadyNew: boolean, valueChanged: boolean,
3166
3165
  section: StylePropertiesSection): void {
3167
3166
  if (!moveDirection) {
3168
- this.parentPaneInternal.resetFocus();
3167
+ this.#parentPane.resetFocus();
3169
3168
  return;
3170
3169
  }
3171
3170
 
@@ -3279,8 +3278,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
3279
3278
  return;
3280
3279
  }
3281
3280
 
3282
- const currentNode = this.parentPaneInternal.node();
3283
- this.parentPaneInternal.setUserOperation(true);
3281
+ const currentNode = this.#parentPane.node();
3282
+ this.#parentPane.setUserOperation(true);
3284
3283
 
3285
3284
  styleText += Platform.StringUtilities.findUnclosedCssQuote(styleText);
3286
3285
  styleText += ')'.repeat(Platform.StringUtilities.countUnmatchedLeftParentheses(styleText));
@@ -3302,7 +3301,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
3302
3301
  majorChange = false;
3303
3302
  success = await this.property.setText(this.originalPropertyText, majorChange, overwriteProperty);
3304
3303
  }
3305
- this.parentPaneInternal.setUserOperation(false);
3304
+ this.#parentPane.setUserOperation(false);
3306
3305
 
3307
3306
  // TODO: using this.property.index to access its containing StyleDeclaration's property will result in
3308
3307
  // off-by-1 errors when the containing StyleDeclaration's respective property has already been deleted.
@@ -3322,7 +3321,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
3322
3321
  return;
3323
3322
  }
3324
3323
 
3325
- this.matchedStylesInternal.resetActiveProperties();
3324
+ this.#matchedStyles.resetActiveProperties();
3326
3325
  this.hasBeenEditedIncrementally = true;
3327
3326
 
3328
3327
  // null check for updatedProperty before setting this.property as the code never expects this.property to be undefined or null.
@@ -172,7 +172,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
172
172
  private noMatchesElement: HTMLElement;
173
173
  private sectionsContainer: UI.Widget.Widget;
174
174
  sectionByElement = new WeakMap<Node, StylePropertiesSection>();
175
- private readonly swatchPopoverHelperInternal = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
175
+ readonly #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
176
176
  readonly linkifier = new Components.Linkifier.Linkifier(MAX_LINK_LENGTH, /* useLinkDecorator */ true);
177
177
 
178
178
  private readonly decorator: StylePropertyHighlighter;
@@ -180,7 +180,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
180
180
  private lastRevealedProperty: SDK.CSSProperty.CSSProperty|null = null;
181
181
  private userOperation = false;
182
182
  isEditingStyle = false;
183
- private filterRegexInternal: RegExp|null = null;
183
+ #filterRegex: RegExp|null = null;
184
184
  private isActivePropertyHighlighted = false;
185
185
  private initialUpdateCompleted = false;
186
186
  hasMatchedStyles = false;
@@ -218,7 +218,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
218
218
  this.sectionsContainer.contentElement.addEventListener(
219
219
  'focusout', this.sectionsContainerFocusChanged.bind(this), false);
220
220
 
221
- this.swatchPopoverHelperInternal.addEventListener(
221
+ this.#swatchPopoverHelper.addEventListener(
222
222
  InlineEditor.SwatchPopoverHelper.Events.WILL_SHOW_POPOVER, this.hideAllPopovers, this);
223
223
  this.decorator = new StylePropertyHighlighter(this);
224
224
  this.contentElement.classList.add('styles-pane');
@@ -250,7 +250,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
250
250
  }
251
251
 
252
252
  swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {
253
- return this.swatchPopoverHelperInternal;
253
+ return this.#swatchPopoverHelper;
254
254
  }
255
255
 
256
256
  setUserOperation(userOperation: boolean): void {
@@ -356,7 +356,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
356
356
 
357
357
  forceUpdate(): void {
358
358
  this.needsForceUpdate = true;
359
- this.swatchPopoverHelperInternal.hide();
359
+ this.#swatchPopoverHelper.hide();
360
360
  this.#updateAbortController?.abort();
361
361
  this.resetCache();
362
362
  this.update();
@@ -398,7 +398,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
398
398
  }
399
399
  }
400
400
 
401
- if (sectionToFocus && this.filterRegexInternal) {
401
+ if (sectionToFocus && this.#filterRegex) {
402
402
  sectionToFocus = sectionToFocus.findCurrentOrNextVisible(/* willIterateForward= */ willIterateForward);
403
403
  }
404
404
  if (sectionToFocus) {
@@ -476,7 +476,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
476
476
  private onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
477
477
  const regex = event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null;
478
478
  this.lastFilterChange = Date.now();
479
- this.filterRegexInternal = regex;
479
+ this.#filterRegex = regex;
480
480
  this.updateFilter();
481
481
  this.resetFocus();
482
482
  setTimeout(() => {
@@ -516,7 +516,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
516
516
  section.update(section === editedSection);
517
517
  }
518
518
 
519
- if (this.filterRegexInternal) {
519
+ if (this.#filterRegex) {
520
520
  this.updateFilter();
521
521
  }
522
522
  this.swatchPopoverHelper().reposition();
@@ -984,7 +984,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
984
984
 
985
985
  this.sectionsContainerFocusChanged();
986
986
 
987
- if (this.filterRegexInternal) {
987
+ if (this.#filterRegex) {
988
988
  this.updateFilter();
989
989
  } else {
990
990
  this.noMatchesElement.classList.toggle('hidden', this.sectionBlocks.length > 0);
@@ -1284,7 +1284,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
1284
1284
  }
1285
1285
 
1286
1286
  filterRegex(): RegExp|null {
1287
- return this.filterRegexInternal;
1287
+ return this.#filterRegex;
1288
1288
  }
1289
1289
 
1290
1290
  private updateFilter(): void {
@@ -1311,7 +1311,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
1311
1311
  }
1312
1312
 
1313
1313
  hideAllPopovers(): void {
1314
- this.swatchPopoverHelperInternal.hide();
1314
+ this.#swatchPopoverHelper.hide();
1315
1315
  this.imagePreviewPopover.hide();
1316
1316
  if (this.activeCSSAngle) {
1317
1317
  this.activeCSSAngle.minify();
@@ -1492,12 +1492,12 @@ export interface EventTypes {
1492
1492
  const MAX_LINK_LENGTH = 23;
1493
1493
 
1494
1494
  export class SectionBlock {
1495
- private readonly titleElementInternal: Element|null;
1495
+ readonly #titleElement: Element|null;
1496
1496
  sections: StylePropertiesSection[];
1497
1497
  #expanded = false;
1498
1498
  #icon: IconButton.Icon.Icon|undefined;
1499
1499
  constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
1500
- this.titleElementInternal = titleElement;
1500
+ this.#titleElement = titleElement;
1501
1501
  this.sections = [];
1502
1502
  this.#expanded = expandedByDefault ?? false;
1503
1503
 
@@ -1514,12 +1514,12 @@ export class SectionBlock {
1514
1514
  }
1515
1515
 
1516
1516
  expand(expand: boolean): void {
1517
- if (!this.titleElementInternal || !this.#icon) {
1517
+ if (!this.#titleElement || !this.#icon) {
1518
1518
  return;
1519
1519
  }
1520
- this.titleElementInternal.classList.toggle('empty-section', !expand);
1520
+ this.#titleElement.classList.toggle('empty-section', !expand);
1521
1521
  this.#icon.name = expand ? 'triangle-down' : 'triangle-right';
1522
- UI.ARIAUtils.setExpanded(this.titleElementInternal, expand);
1522
+ UI.ARIAUtils.setExpanded(this.#titleElement, expand);
1523
1523
  this.#expanded = expand;
1524
1524
  this.sections.forEach(section => section.element.classList.toggle('hidden', !expand));
1525
1525
  }
@@ -1631,14 +1631,14 @@ export class SectionBlock {
1631
1631
  numVisibleSections += section.updateFilter() ? 1 : 0;
1632
1632
  hasAnyVisibleSection = section.updateFilter() || hasAnyVisibleSection;
1633
1633
  }
1634
- if (this.titleElementInternal) {
1635
- this.titleElementInternal.classList.toggle('hidden', !hasAnyVisibleSection);
1634
+ if (this.#titleElement) {
1635
+ this.#titleElement.classList.toggle('hidden', !hasAnyVisibleSection);
1636
1636
  }
1637
1637
  return numVisibleSections;
1638
1638
  }
1639
1639
 
1640
1640
  titleElement(): Element|null {
1641
- return this.titleElementInternal;
1641
+ return this.#titleElement;
1642
1642
  }
1643
1643
  }
1644
1644
 
@@ -197,7 +197,7 @@ export class DeviceModeToolbar {
197
197
  private readonly showUserAgentTypeSetting: Common.Settings.Setting<boolean>;
198
198
  private autoAdjustScaleSetting: Common.Settings.Setting<boolean>;
199
199
  private readonly lastMode: Map<EmulationModel.EmulatedDevices.EmulatedDevice, EmulationModel.EmulatedDevices.Mode>;
200
- private readonly elementInternal: HTMLDivElement;
200
+ readonly #element: HTMLDivElement;
201
201
  private readonly emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
202
202
  private readonly persistenceSetting: Common.Settings.Setting<{device: string, orientation: string, mode: string}>;
203
203
  private spanButton!: UI.Toolbar.ToolbarButton;
@@ -240,11 +240,11 @@ export class DeviceModeToolbar {
240
240
 
241
241
  this.lastMode = new Map();
242
242
 
243
- this.elementInternal = document.createElement('div');
244
- this.elementInternal.classList.add('device-mode-toolbar');
245
- this.elementInternal.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
243
+ this.#element = document.createElement('div');
244
+ this.#element.classList.add('device-mode-toolbar');
245
+ this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
246
246
 
247
- const mainToolbar = this.elementInternal.createChild('devtools-toolbar', 'main-toolbar');
247
+ const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
248
248
  this.appendDeviceSelectMenu(mainToolbar);
249
249
 
250
250
  this.widthInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
@@ -269,7 +269,7 @@ export class DeviceModeToolbar {
269
269
 
270
270
  this.appendDisplaySettings(mainToolbar);
271
271
  this.appendDevicePositionItems(mainToolbar);
272
- const optionsToolbar = this.elementInternal.createChild('devtools-toolbar', 'device-mode-toolbar-options');
272
+ const optionsToolbar = this.#element.createChild('devtools-toolbar', 'device-mode-toolbar-options');
273
273
  optionsToolbar.wrappable = true;
274
274
  this.fillOptionsToolbar(optionsToolbar);
275
275
 
@@ -711,7 +711,7 @@ export class DeviceModeToolbar {
711
711
  }
712
712
 
713
713
  element(): Element {
714
- return this.elementInternal;
714
+ return this.#element;
715
715
  }
716
716
 
717
717
  update(): void {
@@ -566,7 +566,7 @@ export class DeviceModeView extends UI.Widget.VBox {
566
566
  }
567
567
 
568
568
  export class Ruler extends UI.Widget.VBox {
569
- private contentElementInternal: HTMLElement;
569
+ #contentElement: HTMLElement;
570
570
  private readonly horizontal: boolean;
571
571
  private scale: number;
572
572
  private count: number;
@@ -577,7 +577,7 @@ export class Ruler extends UI.Widget.VBox {
577
577
  constructor(horizontal: boolean, applyCallback: (arg0: number) => void) {
578
578
  super({jslog: `${VisualLogging.deviceModeRuler().track({click: true})}`});
579
579
  this.element.classList.add('device-mode-ruler');
580
- this.contentElementInternal =
580
+ this.#contentElement =
581
581
  this.element.createChild('div', 'device-mode-ruler-content').createChild('div', 'device-mode-ruler-inner');
582
582
  this.horizontal = horizontal;
583
583
  this.scale = 1;
@@ -597,10 +597,10 @@ export class Ruler extends UI.Widget.VBox {
597
597
 
598
598
  update(): void {
599
599
  const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
600
- const size = this.horizontal ? this.contentElementInternal.offsetWidth : this.contentElementInternal.offsetHeight;
600
+ const size = this.horizontal ? this.#contentElement.offsetWidth : this.#contentElement.offsetHeight;
601
601
 
602
602
  if (this.scale !== this.renderedScale || zoomFactor !== this.renderedZoomFactor) {
603
- this.contentElementInternal.removeChildren();
603
+ this.#contentElement.removeChildren();
604
604
  this.count = 0;
605
605
  this.renderedScale = this.scale;
606
606
  this.renderedZoomFactor = zoomFactor;
@@ -627,7 +627,7 @@ export class Ruler extends UI.Widget.VBox {
627
627
 
628
628
  for (let i = count; i < this.count; i++) {
629
629
  if (!(i % step)) {
630
- const lastChild = this.contentElementInternal.lastChild;
630
+ const lastChild = this.#contentElement.lastChild;
631
631
  if (lastChild) {
632
632
  lastChild.remove();
633
633
  }
@@ -638,7 +638,7 @@ export class Ruler extends UI.Widget.VBox {
638
638
  if (i % step) {
639
639
  continue;
640
640
  }
641
- const marker = this.contentElementInternal.createChild('div', 'device-mode-ruler-marker');
641
+ const marker = this.#contentElement.createChild('div', 'device-mode-ruler-marker');
642
642
  if (i) {
643
643
  if (this.horizontal) {
644
644
  marker.style.left = (5 * i) * this.scale / zoomFactor + 'px';
@@ -355,24 +355,24 @@ export const enum Section {
355
355
 
356
356
  export class MediaQueryUIModel {
357
357
  private cssMedia: SDK.CSSMedia.CSSMedia;
358
- private readonly minWidthExpressionInternal: SDK.CSSMedia.CSSMediaQueryExpression|null;
359
- private readonly maxWidthExpressionInternal: SDK.CSSMedia.CSSMediaQueryExpression|null;
360
- private readonly activeInternal: boolean;
361
- private readonly sectionInternal: Section;
362
- private rawLocationInternal?: SDK.CSSModel.CSSLocation|null;
358
+ readonly #minWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null;
359
+ readonly #maxWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null;
360
+ readonly #active: boolean;
361
+ readonly #section: Section;
362
+ #rawLocation?: SDK.CSSModel.CSSLocation|null;
363
363
  constructor(
364
364
  cssMedia: SDK.CSSMedia.CSSMedia, minWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null,
365
365
  maxWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null, active: boolean) {
366
366
  this.cssMedia = cssMedia;
367
- this.minWidthExpressionInternal = minWidthExpression;
368
- this.maxWidthExpressionInternal = maxWidthExpression;
369
- this.activeInternal = active;
367
+ this.#minWidthExpression = minWidthExpression;
368
+ this.#maxWidthExpression = maxWidthExpression;
369
+ this.#active = active;
370
370
  if (maxWidthExpression && !minWidthExpression) {
371
- this.sectionInternal = Section.MAX;
371
+ this.#section = Section.MAX;
372
372
  } else if (minWidthExpression && maxWidthExpression) {
373
- this.sectionInternal = Section.MIN_MAX;
373
+ this.#section = Section.MIN_MAX;
374
374
  } else {
375
- this.sectionInternal = Section.MIN;
375
+ this.#section = Section.MIN;
376
376
  }
377
377
  }
378
378
 
@@ -480,7 +480,7 @@ export class MediaQueryUIModel {
480
480
  }
481
481
 
482
482
  section(): Section {
483
- return this.sectionInternal;
483
+ return this.#section;
484
484
  }
485
485
 
486
486
  mediaText(): string {
@@ -488,21 +488,21 @@ export class MediaQueryUIModel {
488
488
  }
489
489
 
490
490
  rawLocation(): SDK.CSSModel.CSSLocation|null {
491
- if (!this.rawLocationInternal) {
492
- this.rawLocationInternal = this.cssMedia.rawLocation();
491
+ if (!this.#rawLocation) {
492
+ this.#rawLocation = this.cssMedia.rawLocation();
493
493
  }
494
- return this.rawLocationInternal;
494
+ return this.#rawLocation;
495
495
  }
496
496
 
497
497
  minWidthExpression(): SDK.CSSMedia.CSSMediaQueryExpression|null {
498
- return this.minWidthExpressionInternal;
498
+ return this.#minWidthExpression;
499
499
  }
500
500
 
501
501
  maxWidthExpression(): SDK.CSSMedia.CSSMediaQueryExpression|null {
502
- return this.maxWidthExpressionInternal;
502
+ return this.#maxWidthExpression;
503
503
  }
504
504
 
505
505
  active(): boolean {
506
- return this.activeInternal;
506
+ return this.#active;
507
507
  }
508
508
  }