chrome-devtools-frontend 1.0.942095 → 1.0.943709

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 (310) hide show
  1. package/WATCHLISTS +1 -1
  2. package/config/gni/all_devtools_files.gni +0 -58
  3. package/config/gni/devtools_grd_files.gni +48 -7
  4. package/config/gni/devtools_image_files.gni +1 -1
  5. package/front_end/.eslintrc.js +11 -1
  6. package/front_end/Images/src/{feedback_thin_16x16_icon.svg → survey_feedback_icon.svg} +1 -1
  7. package/front_end/Tests.js +0 -32
  8. package/front_end/core/i18n/locales/af.json +455 -44
  9. package/front_end/core/i18n/locales/am.json +455 -44
  10. package/front_end/core/i18n/locales/ar.json +455 -44
  11. package/front_end/core/i18n/locales/as.json +455 -44
  12. package/front_end/core/i18n/locales/az.json +455 -44
  13. package/front_end/core/i18n/locales/be.json +456 -45
  14. package/front_end/core/i18n/locales/bg.json +455 -44
  15. package/front_end/core/i18n/locales/bn.json +455 -44
  16. package/front_end/core/i18n/locales/bs.json +455 -44
  17. package/front_end/core/i18n/locales/ca.json +457 -46
  18. package/front_end/core/i18n/locales/cs.json +458 -47
  19. package/front_end/core/i18n/locales/cy.json +455 -44
  20. package/front_end/core/i18n/locales/da.json +455 -44
  21. package/front_end/core/i18n/locales/de.json +455 -44
  22. package/front_end/core/i18n/locales/el.json +455 -44
  23. package/front_end/core/i18n/locales/en-GB.json +449 -38
  24. package/front_end/core/i18n/locales/en-US.json +8 -8
  25. package/front_end/core/i18n/locales/en-XL.json +8 -8
  26. package/front_end/core/i18n/locales/es-419.json +455 -44
  27. package/front_end/core/i18n/locales/es.json +455 -44
  28. package/front_end/core/i18n/locales/et.json +455 -44
  29. package/front_end/core/i18n/locales/eu.json +462 -51
  30. package/front_end/core/i18n/locales/fa.json +455 -44
  31. package/front_end/core/i18n/locales/fi.json +455 -44
  32. package/front_end/core/i18n/locales/fil.json +454 -43
  33. package/front_end/core/i18n/locales/fr-CA.json +455 -44
  34. package/front_end/core/i18n/locales/fr.json +456 -45
  35. package/front_end/core/i18n/locales/gl.json +455 -44
  36. package/front_end/core/i18n/locales/gu.json +456 -45
  37. package/front_end/core/i18n/locales/he.json +455 -44
  38. package/front_end/core/i18n/locales/hi.json +455 -44
  39. package/front_end/core/i18n/locales/hr.json +455 -44
  40. package/front_end/core/i18n/locales/hu.json +455 -44
  41. package/front_end/core/i18n/locales/hy.json +455 -44
  42. package/front_end/core/i18n/locales/id.json +455 -44
  43. package/front_end/core/i18n/locales/is.json +455 -44
  44. package/front_end/core/i18n/locales/it.json +502 -91
  45. package/front_end/core/i18n/locales/ja.json +456 -45
  46. package/front_end/core/i18n/locales/ka.json +455 -44
  47. package/front_end/core/i18n/locales/kk.json +456 -45
  48. package/front_end/core/i18n/locales/km.json +455 -44
  49. package/front_end/core/i18n/locales/kn.json +455 -44
  50. package/front_end/core/i18n/locales/ko.json +455 -44
  51. package/front_end/core/i18n/locales/ky.json +456 -45
  52. package/front_end/core/i18n/locales/lo.json +454 -43
  53. package/front_end/core/i18n/locales/lt.json +455 -44
  54. package/front_end/core/i18n/locales/lv.json +458 -47
  55. package/front_end/core/i18n/locales/mk.json +455 -44
  56. package/front_end/core/i18n/locales/ml.json +461 -50
  57. package/front_end/core/i18n/locales/mn.json +455 -44
  58. package/front_end/core/i18n/locales/mr.json +455 -44
  59. package/front_end/core/i18n/locales/ms.json +455 -44
  60. package/front_end/core/i18n/locales/my.json +456 -45
  61. package/front_end/core/i18n/locales/ne.json +456 -45
  62. package/front_end/core/i18n/locales/nl.json +532 -121
  63. package/front_end/core/i18n/locales/no.json +455 -44
  64. package/front_end/core/i18n/locales/or.json +455 -44
  65. package/front_end/core/i18n/locales/pa.json +455 -44
  66. package/front_end/core/i18n/locales/pl.json +455 -44
  67. package/front_end/core/i18n/locales/pt-PT.json +504 -93
  68. package/front_end/core/i18n/locales/pt.json +454 -43
  69. package/front_end/core/i18n/locales/ro.json +455 -44
  70. package/front_end/core/i18n/locales/ru.json +455 -44
  71. package/front_end/core/i18n/locales/si.json +455 -44
  72. package/front_end/core/i18n/locales/sk.json +456 -45
  73. package/front_end/core/i18n/locales/sl.json +455 -44
  74. package/front_end/core/i18n/locales/sq.json +455 -44
  75. package/front_end/core/i18n/locales/sr-Latn.json +455 -44
  76. package/front_end/core/i18n/locales/sr.json +455 -44
  77. package/front_end/core/i18n/locales/sv.json +456 -45
  78. package/front_end/core/i18n/locales/sw.json +455 -44
  79. package/front_end/core/i18n/locales/ta.json +456 -45
  80. package/front_end/core/i18n/locales/te.json +454 -43
  81. package/front_end/core/i18n/locales/th.json +455 -44
  82. package/front_end/core/i18n/locales/tr.json +455 -44
  83. package/front_end/core/i18n/locales/uk.json +455 -44
  84. package/front_end/core/i18n/locales/ur.json +455 -44
  85. package/front_end/core/i18n/locales/uz.json +455 -44
  86. package/front_end/core/i18n/locales/vi.json +455 -44
  87. package/front_end/core/i18n/locales/zh-HK.json +459 -48
  88. package/front_end/core/i18n/locales/zh-TW.json +457 -46
  89. package/front_end/core/i18n/locales/zh.json +460 -49
  90. package/front_end/core/i18n/locales/zu.json +455 -44
  91. package/front_end/core/protocol_client/InspectorBackend.ts +4 -0
  92. package/front_end/core/sdk/AccessibilityModel.ts +99 -78
  93. package/front_end/core/sdk/CPUProfilerModel.ts +7 -9
  94. package/front_end/core/sdk/ConsoleModel.ts +27 -33
  95. package/front_end/core/sdk/DebuggerModel.ts +4 -14
  96. package/front_end/core/sdk/NetworkManager.ts +3 -0
  97. package/front_end/core/sdk/ServiceWorkerCacheModel.ts +13 -12
  98. package/front_end/entrypoints/device_mode_emulation_frame/device_mode_emulation_frame.ts +1 -1
  99. package/front_end/entrypoints/devtools_app/devtools_app.js +1 -1
  100. package/front_end/entrypoints/devtools_app/devtools_app.json +1 -6
  101. package/front_end/entrypoints/formatter_worker/formatter_worker-entrypoint.ts +1 -1
  102. package/front_end/entrypoints/heap_snapshot_worker/heap_snapshot_worker-entrypoint.ts +1 -1
  103. package/front_end/entrypoints/inspector/inspector.js +1 -1
  104. package/front_end/entrypoints/inspector/inspector.json +1 -3
  105. package/front_end/entrypoints/inspector_main/inspector_main-meta.ts +2 -3
  106. package/front_end/entrypoints/js_app/js_app.js +1 -1
  107. package/front_end/entrypoints/js_app/js_app.json +1 -3
  108. package/front_end/entrypoints/main/MainImpl.ts +2 -2
  109. package/front_end/entrypoints/main/main-meta.ts +1 -2
  110. package/front_end/entrypoints/ndb_app/ndb_app.js +1 -1
  111. package/front_end/entrypoints/node_app/node_app-meta.ts +0 -2
  112. package/front_end/entrypoints/node_app/node_app.js +1 -1
  113. package/front_end/entrypoints/node_app/node_app.json +1 -3
  114. package/front_end/entrypoints/node_main/node_main-meta.ts +0 -1
  115. package/front_end/entrypoints/shell/shell.json +1 -5
  116. package/front_end/entrypoints/wasmparser_worker/wasmparser_worker-entrypoint.ts +1 -1
  117. package/front_end/entrypoints/worker_app/worker_app.js +1 -1
  118. package/front_end/entrypoints/worker_app/worker_app.json +1 -3
  119. package/front_end/generated/InspectorBackendCommands.js +21 -1
  120. package/front_end/generated/protocol-mapping.d.ts +32 -1
  121. package/front_end/generated/protocol-proxy-api.d.ts +36 -2
  122. package/front_end/generated/protocol.d.ts +120 -7
  123. package/front_end/legacy_test_runner/bindings_test_runner/IsolatedFilesystemTestRunner.js +2 -2
  124. package/front_end/legacy_test_runner/console_test_runner/console_test_runner.js +5 -1
  125. package/front_end/legacy_test_runner/test_runner/TestRunner.js +3 -1
  126. package/front_end/models/persistence/persistence-meta.ts +0 -1
  127. package/front_end/panels/accessibility/accessibility-meta.ts +0 -1
  128. package/front_end/panels/animation/animation-meta.ts +0 -1
  129. package/front_end/panels/application/ApplicationPanelCacheSection.ts +1 -1
  130. package/front_end/panels/application/BackForwardCacheStrings.ts +3 -1
  131. package/front_end/panels/application/BackForwardCacheView.ts +26 -26
  132. package/front_end/panels/application/application-meta.ts +0 -1
  133. package/front_end/panels/application/components/EndpointsGrid.ts +1 -1
  134. package/front_end/panels/application/components/ReportsGrid.ts +1 -1
  135. package/front_end/panels/application/components/stackTraceRow.css +8 -0
  136. package/front_end/panels/browser_debugger/browser_debugger-meta.ts +1 -2
  137. package/front_end/panels/changes/changes-meta.ts +0 -1
  138. package/front_end/panels/console/ConsolePinPane.ts +2 -6
  139. package/front_end/panels/console/ConsoleViewMessage.ts +8 -1
  140. package/front_end/panels/console/console-meta.ts +0 -1
  141. package/front_end/panels/console_counters/console_counters-meta.ts +0 -1
  142. package/front_end/panels/coverage/coverage-meta.ts +0 -1
  143. package/front_end/panels/css_overview/css_overview-meta.ts +0 -1
  144. package/front_end/panels/developer_resources/developer_resources-meta.ts +0 -1
  145. package/front_end/panels/elements/AccessibilityTreeUtils.ts +1 -1
  146. package/front_end/panels/elements/AccessibilityTreeView.ts +4 -3
  147. package/front_end/panels/elements/components/StylePropertyEditor.ts +2 -0
  148. package/front_end/panels/elements/elements-meta.ts +0 -1
  149. package/front_end/panels/emulation/DeviceModeToolbar.ts +3 -1
  150. package/front_end/panels/emulation/DeviceModeView.ts +2 -1
  151. package/front_end/panels/emulation/InspectedPagePlaceholder.ts +3 -1
  152. package/front_end/panels/emulation/MediaQueryInspector.ts +3 -1
  153. package/front_end/panels/emulation/emulation-meta.ts +0 -3
  154. package/front_end/panels/help/help-meta.ts +0 -1
  155. package/front_end/panels/input/input-meta.ts +0 -1
  156. package/front_end/panels/issues/issues-meta.ts +0 -1
  157. package/front_end/panels/js_profiler/js_profiler-meta.ts +0 -4
  158. package/front_end/panels/layers/layers-meta.ts +0 -4
  159. package/front_end/panels/lighthouse/LighthousePanel.ts +2 -4
  160. package/front_end/panels/lighthouse/LighthouseReportRenderer.ts +1 -4
  161. package/front_end/panels/lighthouse/lighthouse-meta.ts +0 -1
  162. package/front_end/panels/lighthouse/module.json +0 -6
  163. package/front_end/panels/media/media-meta.ts +0 -1
  164. package/front_end/panels/mobile_throttling/mobile_throttling-meta.ts +0 -1
  165. package/front_end/panels/network/network-meta.ts +1 -2
  166. package/front_end/panels/performance_monitor/performance_monitor-meta.ts +0 -1
  167. package/front_end/panels/profiler/CPUProfileView.ts +10 -3
  168. package/front_end/panels/profiler/profiler-meta.ts +0 -3
  169. package/front_end/panels/protocol_monitor/protocol_monitor-meta.ts +0 -1
  170. package/front_end/panels/screencast/screencast-meta.ts +0 -4
  171. package/front_end/panels/security/security-meta.ts +0 -1
  172. package/front_end/panels/sensors/sensors-meta.ts +0 -1
  173. package/front_end/panels/settings/emulation/emulation-meta.ts +0 -1
  174. package/front_end/panels/settings/settings-meta.ts +0 -1
  175. package/front_end/panels/sources/Plugin.ts +0 -3
  176. package/front_end/panels/sources/UISourceCodeFrame.ts +23 -49
  177. package/front_end/panels/sources/sources-meta.ts +2 -6
  178. package/front_end/panels/timeline/timeline-meta.ts +2 -9
  179. package/front_end/panels/web_audio/web_audio-meta.ts +0 -1
  180. package/front_end/panels/webauthn/webauthn-meta.ts +0 -1
  181. package/front_end/third_party/codemirror.next/chunk/codemirror.js +1 -1
  182. package/front_end/third_party/codemirror.next/package.json +1 -1
  183. package/front_end/third_party/lighthouse/lighthouse-dt-bundle.js +1128 -1158
  184. package/front_end/third_party/lighthouse/locales/ar-XB.json +211 -79
  185. package/front_end/third_party/lighthouse/locales/ar.json +213 -81
  186. package/front_end/third_party/lighthouse/locales/bg.json +211 -79
  187. package/front_end/third_party/lighthouse/locales/ca.json +212 -80
  188. package/front_end/third_party/lighthouse/locales/cs.json +211 -79
  189. package/front_end/third_party/lighthouse/locales/da.json +211 -79
  190. package/front_end/third_party/lighthouse/locales/de.json +211 -79
  191. package/front_end/third_party/lighthouse/locales/el.json +213 -81
  192. package/front_end/third_party/lighthouse/locales/en-GB.json +211 -79
  193. package/front_end/third_party/lighthouse/locales/en-US.json +186 -75
  194. package/front_end/third_party/lighthouse/locales/en-XA.json +211 -79
  195. package/front_end/third_party/lighthouse/locales/en-XL.json +186 -75
  196. package/front_end/third_party/lighthouse/locales/es-419.json +211 -79
  197. package/front_end/third_party/lighthouse/locales/es.json +212 -80
  198. package/front_end/third_party/lighthouse/locales/fi.json +211 -79
  199. package/front_end/third_party/lighthouse/locales/fil.json +211 -79
  200. package/front_end/third_party/lighthouse/locales/fr.json +211 -79
  201. package/front_end/third_party/lighthouse/locales/he.json +212 -80
  202. package/front_end/third_party/lighthouse/locales/hi.json +214 -82
  203. package/front_end/third_party/lighthouse/locales/hr.json +211 -79
  204. package/front_end/third_party/lighthouse/locales/hu.json +211 -79
  205. package/front_end/third_party/lighthouse/locales/id.json +211 -79
  206. package/front_end/third_party/lighthouse/locales/it.json +211 -79
  207. package/front_end/third_party/lighthouse/locales/ja.json +211 -79
  208. package/front_end/third_party/lighthouse/locales/ko.json +211 -79
  209. package/front_end/third_party/lighthouse/locales/lt.json +211 -79
  210. package/front_end/third_party/lighthouse/locales/lv.json +214 -82
  211. package/front_end/third_party/lighthouse/locales/nl.json +211 -79
  212. package/front_end/third_party/lighthouse/locales/no.json +211 -79
  213. package/front_end/third_party/lighthouse/locales/pl.json +211 -79
  214. package/front_end/third_party/lighthouse/locales/pt-PT.json +211 -79
  215. package/front_end/third_party/lighthouse/locales/pt.json +211 -79
  216. package/front_end/third_party/lighthouse/locales/ro.json +212 -80
  217. package/front_end/third_party/lighthouse/locales/ru.json +211 -79
  218. package/front_end/third_party/lighthouse/locales/sk.json +211 -79
  219. package/front_end/third_party/lighthouse/locales/sl.json +211 -79
  220. package/front_end/third_party/lighthouse/locales/sr-Latn.json +211 -79
  221. package/front_end/third_party/lighthouse/locales/sr.json +211 -79
  222. package/front_end/third_party/lighthouse/locales/sv.json +211 -79
  223. package/front_end/third_party/lighthouse/locales/ta.json +218 -86
  224. package/front_end/third_party/lighthouse/locales/te.json +251 -119
  225. package/front_end/third_party/lighthouse/locales/th.json +211 -79
  226. package/front_end/third_party/lighthouse/locales/tr.json +211 -79
  227. package/front_end/third_party/lighthouse/locales/uk.json +212 -80
  228. package/front_end/third_party/lighthouse/locales/vi.json +211 -79
  229. package/front_end/third_party/lighthouse/locales/zh-HK.json +211 -79
  230. package/front_end/third_party/lighthouse/locales/zh-TW.json +211 -79
  231. package/front_end/third_party/lighthouse/locales/zh.json +211 -79
  232. package/front_end/third_party/lighthouse/report/bundle.d.ts +72 -34
  233. package/front_end/third_party/lighthouse/report/bundle.js +698 -492
  234. package/front_end/third_party/lighthouse/report-assets/report-generator.js +1 -2
  235. package/front_end/third_party/lighthouse/report-assets/report.js +40 -35
  236. package/front_end/third_party/lighthouse/report-assets/standalone-template.html +2 -4
  237. package/front_end/ui/components/docs/component_docs.ts +14 -0
  238. package/front_end/ui/components/docs/create_breadcrumbs.ts +1 -1
  239. package/front_end/ui/components/docs/icon_button/basic.ts +3 -3
  240. package/front_end/ui/components/docs/toggle_dark_mode.ts +1 -0
  241. package/front_end/ui/components/docs/toggle_fonts.ts +2 -0
  242. package/front_end/ui/components/helpers/get-stylesheet.ts +0 -15
  243. package/front_end/ui/components/linear_memory_inspector/linear_memory_inspector-meta.ts +1 -2
  244. package/front_end/ui/components/markdown_view/MarkdownImagesMap.ts +1 -1
  245. package/front_end/ui/components/survey_link/SurveyLink.ts +1 -1
  246. package/front_end/ui/components/tree_outline/TreeOutline.ts +71 -8
  247. package/front_end/ui/components/tree_outline/TreeOutlineUtils.ts +8 -6
  248. package/front_end/ui/legacy/Dialog.ts +11 -4
  249. package/front_end/ui/legacy/DropTarget.ts +2 -1
  250. package/front_end/ui/legacy/EmptyWidget.ts +2 -1
  251. package/front_end/ui/legacy/FilterBar.ts +2 -1
  252. package/front_end/ui/legacy/GlassPane.ts +4 -2
  253. package/front_end/ui/legacy/Infobar.ts +3 -2
  254. package/front_end/ui/legacy/InspectorView.ts +6 -1
  255. package/front_end/ui/legacy/ListWidget.ts +2 -1
  256. package/front_end/ui/legacy/PopoverHelper.ts +2 -1
  257. package/front_end/ui/legacy/ProgressIndicator.ts +2 -1
  258. package/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts +2 -1
  259. package/front_end/ui/legacy/ReportView.ts +2 -1
  260. package/front_end/ui/legacy/RootView.ts +2 -1
  261. package/front_end/ui/legacy/SearchableView.ts +2 -1
  262. package/front_end/ui/legacy/SoftContextMenu.ts +3 -2
  263. package/front_end/ui/legacy/SoftDropDown.ts +4 -2
  264. package/front_end/ui/legacy/SplitWidget.ts +2 -1
  265. package/front_end/ui/legacy/SuggestBox.ts +2 -1
  266. package/front_end/ui/legacy/TabbedPane.ts +2 -1
  267. package/front_end/ui/legacy/TargetCrashedScreen.ts +2 -1
  268. package/front_end/ui/legacy/TextPrompt.ts +2 -1
  269. package/front_end/ui/legacy/Toolbar.ts +3 -2
  270. package/front_end/ui/legacy/Treeoutline.ts +4 -3
  271. package/front_end/ui/legacy/UIUtils.ts +17 -14
  272. package/front_end/ui/legacy/ViewManager.ts +2 -1
  273. package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts +1 -2
  274. package/front_end/ui/legacy/components/inline_editor/cssAngle.css +4 -0
  275. package/front_end/ui/legacy/components/object_ui/JavaScriptREPL.ts +2 -2
  276. package/front_end/ui/legacy/components/object_ui/object_ui-meta.ts +0 -4
  277. package/front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts +0 -3
  278. package/front_end/ui/legacy/components/quick_open/filteredListWidget.css +2 -2
  279. package/front_end/ui/legacy/components/quick_open/quick_open-meta.ts +2 -3
  280. package/front_end/ui/legacy/components/source_frame/FontView.ts +4 -1
  281. package/front_end/ui/legacy/components/source_frame/ImageView.ts +4 -1
  282. package/front_end/ui/legacy/components/source_frame/JSONView.ts +4 -1
  283. package/front_end/ui/legacy/components/source_frame/ResourceSourceFrame.ts +3 -1
  284. package/front_end/ui/legacy/components/source_frame/SourceFrame.ts +6 -6
  285. package/front_end/ui/legacy/components/source_frame/XMLView.ts +7 -2
  286. package/front_end/ui/legacy/components/text_editor/CodeMirrorTextEditor.ts +2 -0
  287. package/front_end/ui/legacy/components/text_editor/module.json +0 -3
  288. package/front_end/ui/legacy/components/utils/Linkifier.ts +7 -15
  289. package/front_end/ui/legacy/textButton.css +5 -4
  290. package/front_end/ui/legacy/theme_support/theme_support_impl.ts +7 -9
  291. package/front_end/ui/legacy/utils/create-shadow-root-with-core-styles.ts +2 -2
  292. package/front_end/ui/legacy/utils/inject-core-styles.ts +7 -4
  293. package/inspector_overlay/css_grid_label_helpers.ts +1 -1
  294. package/inspector_overlay/highlight_common.ts +1 -1
  295. package/inspector_overlay/tool_highlight.ts +1 -1
  296. package/package.json +1 -1
  297. package/scripts/check_gn.js +0 -35
  298. package/scripts/eslint_rules/lib/es_modules_import.js +15 -24
  299. package/scripts/eslint_rules/tests/es_modules_import_test.js +8 -16
  300. package/front_end/emulated_devices/module.json +0 -6
  301. package/front_end/panels/emulation/module.json +0 -11
  302. package/front_end/panels/js_profiler/module.json +0 -5
  303. package/front_end/panels/layers/module.json +0 -4
  304. package/front_end/panels/profiler/module.json +0 -5
  305. package/front_end/panels/screencast/module.json +0 -6
  306. package/front_end/panels/timeline/module.json +0 -6
  307. package/front_end/third_party/lighthouse/report-assets/report.css +0 -1774
  308. package/front_end/ui/legacy/components/source_frame/messagesPopover.css +0 -32
  309. package/front_end/ui/legacy/components/source_frame/module.json +0 -14
  310. package/front_end/ui/legacy/module.json +0 -41
package/front_end/third_party/lighthouse/report-assets/standalone-template.html CHANGED
@@ -21,13 +21,11 @@ limitations under the License.
21
21
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
22
22
  <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
23
23
  <title>Lighthouse Report</title>
24
- <style>/*%%LIGHTHOUSE_CSS%%*/</style>
24
+ <style>body {margin: 0}</style>
25
25
  </head>
26
- <body class="lh-root lh-vars">
26
+ <body>
27
27
  <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
28
28
 
29
- <main><!-- report populated here --></main>
30
-
31
29
  <div id="lh-log"></div>
32
30
 
33
31
  <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
package/front_end/ui/components/docs/component_docs.ts CHANGED
@@ -12,3 +12,17 @@ import * as ToggleFonts from './toggle_fonts.js';
12
12
  ToggleDarkMode.init();
13
13
  CreateBreadcrumbs.init();
14
14
  ToggleFonts.init();
15
+
16
+ // This can be used by tests to hide the UI elements that are part of the component docs interface.
17
+ // E.g., this is useful for screenshot tests.
18
+ window.addEventListener('hidecomponentdocsui', () => {
19
+ for (const node of document.querySelectorAll('.component-docs-ui')) {
20
+ (node as HTMLElement).style.display = 'none';
21
+ }
22
+ });
23
+
24
+ window.addEventListener('showcomponentdocsui', () => {
25
+ for (const node of document.querySelectorAll('.component-docs-ui')) {
26
+ (node as HTMLElement).style.display = '';
27
+ }
28
+ });
package/front_end/ui/components/docs/create_breadcrumbs.ts CHANGED
@@ -32,7 +32,7 @@ export function init(): void {
32
32
  }
33
33
  </style>
34
34
 
35
- <ul class="docs-breadcrumbs">
35
+ <ul class="docs-breadcrumbs component-docs-ui">
36
36
  <li><a href="/">Index</a></li>
37
37
  <li><a href=".">All component examples</a></li>
38
38
  </ul>`, container);
package/front_end/ui/components/docs/icon_button/basic.ts CHANGED
@@ -12,18 +12,18 @@ function appendComponent(data: IconButton.IconButton.IconButtonData) {
12
12
 
13
13
  appendComponent({
14
14
  clickHandler: (): void => {},
15
- groups: [{iconName: 'feedback_thin_16x16_icon', iconColor: 'black', text: '1 item'}],
15
+ groups: [{iconName: 'survey_feedback_icon', iconColor: 'black', text: '1 item'}],
16
16
  });
17
17
 
18
18
  appendComponent({
19
19
  clickHandler: (): void => {},
20
- groups: [{iconName: 'feedback_thin_16x16_icon', iconColor: 'black', text: '1 item'}],
20
+ groups: [{iconName: 'survey_feedback_icon', iconColor: 'black', text: '1 item'}],
21
21
  });
22
22
 
23
23
  appendComponent({
24
24
  clickHandler: (): void => {},
25
25
  groups: [
26
- {iconName: 'feedback_thin_16x16_icon', iconColor: 'blue', text: 'Test'},
26
+ {iconName: 'survey_feedback_icon', iconColor: 'blue', text: 'Test'},
27
27
  {iconName: 'warning_icon', iconColor: '', text: '1'},
28
28
  ],
29
29
  });
package/front_end/ui/components/docs/toggle_dark_mode.ts CHANGED
@@ -16,6 +16,7 @@ export function init(): void {
16
16
  window.addEventListener('load', () => {
17
17
  const button = document.createElement('button');
18
18
  button.innerText = 'Toggle light/dark mode';
19
+ button.className = 'component-docs-ui';
19
20
 
20
21
  button.style.position = 'fixed';
21
22
  button.style.bottom = '10px';
package/front_end/ui/components/docs/toggle_fonts.ts CHANGED
@@ -14,6 +14,7 @@ export function init(): void {
14
14
  // we want a single font-family to be used by the tests.
15
15
  if (urlParams.has('fontFamily')) {
16
16
  const div = document.createElement('div');
17
+ div.className = 'component-docs-ui';
17
18
  div.style.position = 'fixed';
18
19
  div.style.bottom = '10px';
19
20
  div.style.right = '230px';
@@ -30,6 +31,7 @@ export function init(): void {
30
31
 
31
32
  document.body.classList.add(PLATFORM_LINUX_CLASS);
32
33
  const button = document.createElement('button');
34
+ button.className = 'component-docs-ui';
33
35
 
34
36
  const loop = [
35
37
  PLATFORM_LINUX_CLASS,
package/front_end/ui/components/helpers/get-stylesheet.ts CHANGED
@@ -41,20 +41,5 @@ export function legacyGetStyleSheets(path: string): CSSStyleSheet[] {
41
41
  * them through to the right place, respecting Karma's ROOT_DIRECTORY setting.
42
42
  */
43
43
  export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
44
- 'ui/legacy/inspectorCommon.css',
45
- 'ui/legacy/textButton.css',
46
- 'ui/legacy/themeColors.css',
47
- 'ui/legacy/inspectorSyntaxHighlight.css',
48
- 'ui/legacy/progressIndicator.css',
49
44
  'panels/application/serviceWorkerUpdateCycleView.css',
50
- 'ui/legacy/tabbedPane.css',
51
- 'ui/legacy/glassPane.css',
52
- 'ui/legacy/suggestBox.css',
53
- 'ui/legacy/treeoutline.css',
54
- 'ui/legacy/softContextMenu.css',
55
- 'ui/legacy/splitWidget.css',
56
- 'ui/legacy/components/source_frame/jsonView.css',
57
- 'ui/legacy/searchableView.css',
58
- 'ui/legacy/toolbar.css',
59
- 'ui/legacy/inspectorViewTabbedPane.css',
60
45
  ];
package/front_end/ui/components/linear_memory_inspector/linear_memory_inspector-meta.ts CHANGED
@@ -2,12 +2,11 @@
2
2
  // Use of this source code is governed by a BSD-style license that can be
3
3
  // found in the LICENSE file.
4
4
 
5
+ import * as i18n from '../../../core/i18n/i18n.js';
5
6
  import * as UI from '../../legacy/legacy.js';
6
7
 
7
- // eslint-disable-next-line rulesdir/es_modules_import
8
8
  import type * as LinearMemoryInspector from './linear_memory_inspector.js';
9
9
 
10
- import * as i18n from '../../../core/i18n/i18n.js';
11
10
  const UIStrings = {
12
11
  /**
13
12
  *@description Title of the Linear Memory Inspector tool
package/front_end/ui/components/markdown_view/MarkdownImagesMap.ts CHANGED
@@ -22,7 +22,7 @@ export interface ImageData {
22
22
  * [
23
23
  * 'feedbackIcon',
24
24
  * {
25
- * src: 'Images/feedback_thin_16x16_icon.svg',
25
+ * src: 'Images/survey_feedback_icon.svg',
26
26
  * isIcon: true,
27
27
  * width: '20px',
28
28
  * height: '20px',
package/front_end/ui/components/survey_link/SurveyLink.ts CHANGED
@@ -124,7 +124,7 @@ export class SurveyLink extends HTMLElement {
124
124
  // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
125
125
  const output = LitHtml.html`
126
126
  <button class="link ${linkState}" tabindex=${ariaDisabled ? '-1' : '0'} .disabled=${ariaDisabled} aria-disabled=${ariaDisabled} @click=${this.sendSurvey}>
127
- <${IconButton.Icon.Icon.litTagName} class="link-icon" .data=${{iconName: 'feedback_thin_16x16_icon', color: 'var(--color-link)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'} as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}><!--
127
+ <${IconButton.Icon.Icon.litTagName} class="link-icon" .data=${{iconName: 'feedback_button_icon', color: 'var(--color-link)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'} as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}><!--
128
128
  -->${linkText}
129
129
  </button>
130
130
  `;
package/front_end/ui/components/tree_outline/TreeOutline.ts CHANGED
@@ -10,7 +10,7 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
10
10
 
11
11
  import treeOutlineStyles from './treeOutline.css.js';
12
12
 
13
- import type {TreeNode, TreeNodeWithChildren} from './TreeOutlineUtils.js';
13
+ import type {TreeNodeId, TreeNode, TreeNodeWithChildren} from './TreeOutlineUtils.js';
14
14
  import {findNextNodeForTreeOutlineKeyboardNavigation, getNodeChildren, getPathToTreeNode, isExpandableNode, trackDOMNodeToTreeNode} from './TreeOutlineUtils.js';
15
15
 
16
16
  const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
@@ -24,6 +24,7 @@ export interface TreeOutlineData<TreeNodeDataType> {
24
24
  * cause issues in the TreeOutline.
25
25
  */
26
26
  tree: readonly TreeNode<TreeNodeDataType>[];
27
+ filter?: (node: TreeNodeDataType) => FilterOption;
27
28
  }
28
29
 
29
30
  export function defaultRenderer(node: TreeNode<string>): LitHtml.TemplateResult {
@@ -66,6 +67,19 @@ export class ItemMouseOutEvent<TreeNodeDataType> extends Event {
66
67
  }
67
68
  }
68
69
 
70
+ /**
71
+ *
72
+ * The tree can be filtered by providing a custom filter function.
73
+ * The filter is applied on every node when constructing the tree
74
+ * and proceeds as follows:
75
+ * - If the filter return SHOW for a node, the node is included in the tree.
76
+ * - If the filter returns FLATTEN, the node is ignored but its subtree is included.
77
+ */
78
+ export const enum FilterOption {
79
+ SHOW = 'SHOW',
80
+ FLATTEN = 'FLATTEN',
81
+ }
82
+
69
83
  export class TreeOutline<TreeNodeDataType> extends HTMLElement {
70
84
  static readonly litTagName = LitHtml.literal`devtools-tree-outline`;
71
85
  private readonly shadow = this.attachShadow({mode: 'open'});
@@ -79,7 +93,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
79
93
  * know for sure when that node will be rendered. This variable tracks the
80
94
  * node that we want focused but may not yet have been rendered.
81
95
  */
82
- private nodePendingFocus: TreeNode<TreeNodeDataType>|null = null;
96
+ private nodeIdPendingFocus: TreeNodeId|null = null;
83
97
  private selectedTreeNode: TreeNode<TreeNodeDataType>|null = null;
84
98
  private defaultRenderer =
85
99
  (node: TreeNode<TreeNodeDataType>, _state: {isExpanded: boolean}): LitHtml.TemplateResult => {
@@ -91,6 +105,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
91
105
  }
92
106
  return LitHtml.html`${String(node.treeNodeData)}`;
93
107
  };
108
+ private nodeFilter?: ((node: TreeNodeDataType) => FilterOption);
94
109
 
95
110
  /**
96
111
  * scheduledRender = render() has been called and scheduled a render.
@@ -134,6 +149,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
134
149
  set data(data: TreeOutlineData<TreeNodeDataType>) {
135
150
  this.defaultRenderer = data.defaultRenderer;
136
151
  this.treeData = data.tree;
152
+ this.nodeFilter = data.filter;
137
153
  if (!this.hasRenderedAtLeastOnce) {
138
154
  this.selectedTreeNode = this.treeData[0];
139
155
  }
@@ -150,14 +166,29 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
150
166
  await this.render();
151
167
  }
152
168
 
169
+ /**
170
+ * Collapses all nodes in the tree.
171
+ */
172
+ async collapseAllNodes(): Promise<void> {
173
+ this.nodeExpandedMap.clear();
174
+ await this.render();
175
+ }
176
+
153
177
  /**
154
178
  * Takes a TreeNode, expands the outline to reveal it, and focuses it.
155
179
  */
156
180
  async expandToAndSelectTreeNode(targetTreeNode: TreeNode<TreeNodeDataType>): Promise<void> {
157
- const pathToTreeNode = await getPathToTreeNode(this.treeData, targetTreeNode);
181
+ return this.expandToAndSelectTreeNodeId(targetTreeNode.id);
182
+ }
183
+
184
+ /**
185
+ * Takes a TreeNode ID, expands the outline to reveal it, and focuses it.
186
+ */
187
+ async expandToAndSelectTreeNodeId(targetTreeNodeId: TreeNodeId): Promise<void> {
188
+ const pathToTreeNode = await getPathToTreeNode(this.treeData, targetTreeNodeId);
158
189
 
159
190
  if (pathToTreeNode === null) {
160
- throw new Error(`Could not find node with id ${targetTreeNode.id} in the tree.`);
191
+ throw new Error(`Could not find node with id ${targetTreeNodeId} in the tree.`);
161
192
  }
162
193
  pathToTreeNode.forEach((node, index) => {
163
194
  // We don't expand the very last node, which was the target node.
@@ -167,10 +198,26 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
167
198
  });
168
199
 
169
200
  // Mark the node as pending focus so when it is rendered into the DOM we can focus it
170
- this.nodePendingFocus = targetTreeNode;
201
+ this.nodeIdPendingFocus = targetTreeNodeId;
171
202
  await this.render();
172
203
  }
173
204
 
205
+ /**
206
+ * Takes a list of TreeNode IDs and expands the corresponding nodes.
207
+ */
208
+ expandNodeIds(nodeIds: TreeNodeId[]): Promise<void> {
209
+ nodeIds.forEach(id => this.nodeExpandedMap.set(id, true));
210
+ return this.render();
211
+ }
212
+
213
+ /**
214
+ * Takes a TreeNode ID and focuses the corresponding node.
215
+ */
216
+ focusNodeId(nodeId: TreeNodeId): Promise<void> {
217
+ this.nodeIdPendingFocus = nodeId;
218
+ return this.render();
219
+ }
220
+
174
221
  async collapseChildrenOfNode(domNode: HTMLLIElement): Promise<void> {
175
222
  const treeNode = this.domNodeToTreeNodeMap.get(domNode);
176
223
  if (!treeNode) {
@@ -208,7 +255,22 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
208
255
  }
209
256
 
210
257
  private async fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
211
- return getNodeChildren(node);
258
+ const children = await getNodeChildren(node);
259
+ if (!this.nodeFilter) {
260
+ return children;
261
+ }
262
+ const filteredChildren = [];
263
+ for (const child of children) {
264
+ const filtering = this.nodeFilter(child.treeNodeData);
265
+ // We always include the selected node in the tree, regardless of its filtering status.
266
+ if (filtering === FilterOption.SHOW || this.isSelectedNode(child) || child.id === this.nodeIdPendingFocus) {
267
+ filteredChildren.push(child);
268
+ } else if (filtering === FilterOption.FLATTEN && isExpandableNode(child)) {
269
+ const grandChildren = await this.fetchNodeChildren(child);
270
+ filteredChildren.push(...grandChildren);
271
+ }
272
+ }
273
+ return filteredChildren;
212
274
  }
213
275
 
214
276
  private setNodeExpandedState(node: TreeNode<TreeNodeDataType>, newExpandedState: boolean): void {
@@ -337,7 +399,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
337
399
  }
338
400
 
339
401
  private focusPendingNode(domNode: HTMLLIElement): void {
340
- this.nodePendingFocus = null;
402
+ this.nodeIdPendingFocus = null;
341
403
  this.focusTreeNode(domNode);
342
404
  }
343
405
 
@@ -411,7 +473,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
411
473
  return;
412
474
  }
413
475
 
414
- if (this.nodePendingFocus && node.id === this.nodePendingFocus.id) {
476
+ if (this.nodeIdPendingFocus && node.id === this.nodeIdPendingFocus) {
415
477
  this.focusPendingNode(domNode);
416
478
  }
417
479
  })}
@@ -433,6 +495,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
433
495
  `;
434
496
  // clang-format on
435
497
  }
498
+
436
499
  private async render(): Promise<void> {
437
500
  if (this.scheduledRender) {
438
501
  // If we are already rendering, don't render again immediately, but
package/front_end/ui/components/tree_outline/TreeOutlineUtils.ts CHANGED
@@ -4,10 +4,12 @@
4
4
  import * as Platform from '../../../core/platform/platform.js';
5
5
  import * as LitHtml from '../../lit-html/lit-html.js';
6
6
 
7
+ export type TreeNodeId = string;
8
+
7
9
  interface BaseTreeNode<TreeNodeDataType> {
8
10
  treeNodeData: TreeNodeDataType;
9
11
  renderer?: (node: TreeNode<TreeNodeDataType>, state: {isExpanded: boolean}) => LitHtml.TemplateResult;
10
- id: string;
12
+ id: TreeNodeId;
11
13
  }
12
14
 
13
15
  export interface TreeNodeWithChildren<TreeNodeDataType> extends BaseTreeNode<TreeNodeDataType> {
@@ -196,10 +198,10 @@ export const getNodeChildren =
196
198
  * And you look for F, you'll get back [A, D, F]
197
199
  */
198
200
  export const getPathToTreeNode =
199
- async<TreeNodeDataType>(tree: readonly TreeNode<TreeNodeDataType>[], nodeToFind: TreeNode<TreeNodeDataType>):
201
+ async<TreeNodeDataType>(tree: readonly TreeNode<TreeNodeDataType>[], nodeIdToFind: TreeNodeId):
200
202
  Promise<TreeNode<TreeNodeDataType>[]|null> => {
201
203
  for (const rootNode of tree) {
202
- const foundPathOrNull = await getPathToTreeNodeRecursively(rootNode, nodeToFind, [rootNode]);
204
+ const foundPathOrNull = await getPathToTreeNodeRecursively(rootNode, nodeIdToFind, [rootNode]);
203
205
  if (foundPathOrNull !== null) {
204
206
  return foundPathOrNull;
205
207
  }
@@ -208,16 +210,16 @@ export const getPathToTreeNode =
208
210
  };
209
211
 
210
212
  const getPathToTreeNodeRecursively = async<TreeNodeDataType>(
211
- currentNode: TreeNode<TreeNodeDataType>, nodeToFind: TreeNode<TreeNodeDataType>,
213
+ currentNode: TreeNode<TreeNodeDataType>, nodeIdToFind: TreeNodeId,
212
214
  pathToNode: TreeNode<TreeNodeDataType>[]): Promise<TreeNode<TreeNodeDataType>[]|null> => {
213
- if (currentNode.id === nodeToFind.id) {
215
+ if (currentNode.id === nodeIdToFind) {
214
216
  return pathToNode;
215
217
  }
216
218
 
217
219
  if (currentNode.children) {
218
220
  const children = await getNodeChildren(currentNode);
219
221
  for (const child of children) {
220
- const foundPathOrNull = await getPathToTreeNodeRecursively(child, nodeToFind, [...pathToNode, child]);
222
+ const foundPathOrNull = await getPathToTreeNodeRecursively(child, nodeIdToFind, [...pathToNode, child]);
221
223
  if (foundPathOrNull !== null) {
222
224
  return foundPathOrNull;
223
225
  }
package/front_end/ui/legacy/Dialog.ts CHANGED
@@ -39,6 +39,8 @@ import type {DevToolsCloseButton} from './UIUtils.js';
39
39
  import type {WidgetElement} from './Widget.js';
40
40
  import {WidgetFocusRestorer} from './Widget.js';
41
41
 
42
+ import dialogStyles from './dialog.css.legacy.js';
43
+
42
44
  export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof GlassPane>(GlassPane) {
43
45
  private tabIndexBehavior: OutsideTabIndexBehavior;
44
46
  private tabIndexMap: Map<HTMLElement, number>;
@@ -50,7 +52,7 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
50
52
 
51
53
  constructor() {
52
54
  super();
53
- this.registerRequiredCSS('ui/legacy/dialog.css');
55
+ this.registerRequiredCSS(dialogStyles);
54
56
  this.contentElement.tabIndex = 0;
55
57
  this.contentElement.addEventListener('focus', () => this.widget().focus(), false);
56
58
  this.widget().setDefaultFocusedElement(this.contentElement);
@@ -135,9 +137,14 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
135
137
  if (node instanceof HTMLElement) {
136
138
  const element = (node as HTMLElement);
137
139
  const tabIndex = element.tabIndex;
138
- if (tabIndex >= 0 && (!exclusionSet || !exclusionSet.has(element))) {
139
- this.tabIndexMap.set(element, tabIndex);
140
- element.tabIndex = -1;
140
+ if (!exclusionSet?.has(element)) {
141
+ if (tabIndex >= 0) {
142
+ this.tabIndexMap.set(element, tabIndex);
143
+ element.tabIndex = -1;
144
+ } else if (element.hasAttribute('contenteditable')) {
145
+ this.tabIndexMap.set(element, element.hasAttribute('tabindex') ? tabIndex : 0);
146
+ element.tabIndex = -1;
147
+ }
141
148
  }
142
149
  }
143
150
  }
package/front_end/ui/legacy/DropTarget.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  // Use of this source code is governed by a BSD-style license that can be
3
3
  // found in the LICENSE file.
4
4
 
5
+ import dropTargetStyles from './dropTarget.css.legacy.js';
5
6
  import * as Utils from './utils/utils.js';
6
7
 
7
8
  export class DropTarget {
@@ -71,7 +72,7 @@ export class DropTarget {
71
72
  }
72
73
  this.dragMaskElement = this.element.createChild('div', '');
73
74
  const shadowRoot = Utils.createShadowRootWithCoreStyles(
74
- this.dragMaskElement, {cssFile: 'ui/legacy/dropTarget.css', delegatesFocus: undefined});
75
+ this.dragMaskElement, {cssFile: dropTargetStyles, delegatesFocus: undefined});
75
76
  shadowRoot.createChild('div', 'drop-target-message').textContent = this.messageText;
76
77
  this.dragMaskElement.addEventListener('drop', this.onDrop.bind(this), true);
77
78
  this.dragMaskElement.addEventListener('dragleave', this.onDragLeave.bind(this), true);
package/front_end/ui/legacy/EmptyWidget.ts CHANGED
@@ -30,6 +30,7 @@
30
30
 
31
31
  import * as i18n from '../../core/i18n/i18n.js';
32
32
 
33
+ import emptyWidgetStyles from './emptyWidget.css.legacy.js';
33
34
  import {VBox} from './Widget.js';
34
35
  import {XLink} from './XLink.js';
35
36
 
@@ -47,7 +48,7 @@ export class EmptyWidget extends VBox {
47
48
 
48
49
  constructor(text: string) {
49
50
  super();
50
- this.registerRequiredCSS('ui/legacy/emptyWidget.css');
51
+ this.registerRequiredCSS(emptyWidgetStyles);
51
52
  this.element.classList.add('empty-view-scroller');
52
53
  this.contentElement = this.element.createChild('div', 'empty-view') as HTMLDivElement;
53
54
  this.textElement = this.contentElement.createChild('div', 'empty-bold-text');
package/front_end/ui/legacy/FilterBar.ts CHANGED
@@ -43,6 +43,7 @@ import {ToolbarSettingToggle} from './Toolbar.js';
43
43
  import {Tooltip} from './Tooltip.js';
44
44
  import {CheckboxLabel, createTextChild} from './UIUtils.js';
45
45
  import {HBox} from './Widget.js';
46
+ import filterStyles from './filter.css.legacy.js';
46
47
 
47
48
  const UIStrings = {
48
49
  /**
@@ -79,7 +80,7 @@ export class FilterBar extends Common.ObjectWrapper.eventMixin<FilterBarEventTyp
79
80
 
80
81
  constructor(name: string, visibleByDefault?: boolean) {
81
82
  super();
82
- this.registerRequiredCSS('ui/legacy/filter.css');
83
+ this.registerRequiredCSS(filterStyles);
83
84
  this.enabled = true;
84
85
  this.element.classList.add('filter-bar');
85
86
 
package/front_end/ui/legacy/GlassPane.ts CHANGED
@@ -10,6 +10,7 @@ import {Icon} from './Icon.js';
10
10
  import {deepElementFromEvent} from './UIUtils.js';
11
11
  import type {WidgetElement} from './Widget.js';
12
12
  import {Widget} from './Widget.js';
13
+ import glassPaneStyles from './glassPane.css.legacy.js';
13
14
 
14
15
  export class GlassPane {
15
16
  private readonly widgetInternal: Widget;
@@ -36,7 +37,7 @@ export class GlassPane {
36
37
  this.element.shadowRoot.appendChild(this.arrowElement);
37
38
  }
38
39
 
39
- this.registerRequiredCSS('ui/legacy/glassPane.css');
40
+ this.registerRequiredCSS(glassPaneStyles);
40
41
  this.setPointerEventsBehavior(PointerEventsBehavior.PierceGlassPane);
41
42
 
42
43
  this.onMouseDownBound = this.onMouseDown.bind(this);
@@ -54,7 +55,8 @@ export class GlassPane {
54
55
  return this.widgetInternal.isShowing();
55
56
  }
56
57
 
57
- registerRequiredCSS(cssFile: string): void {
58
+ registerRequiredCSS(cssFile: string|{cssContent: string}): void {
59
+ // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
58
60
  this.widgetInternal.registerRequiredCSS(cssFile);
59
61
  }
60
62
 
package/front_end/ui/legacy/Infobar.ts CHANGED
@@ -10,6 +10,7 @@ import * as ARIAUtils from './ARIAUtils.js';
10
10
  import {Keys} from './KeyboardShortcut.js';
11
11
  import {createTextButton} from './UIUtils.js';
12
12
  import type {Widget} from './Widget.js';
13
+ import infobarStyles from './infobar.css.legacy.js';
13
14
 
14
15
  const UIStrings = {
15
16
  /**
@@ -54,8 +55,8 @@ export class Infobar {
54
55
  constructor(type: Type, text: string, actions?: InfobarAction[], disableSetting?: Common.Settings.Setting<any>) {
55
56
  this.element = document.createElement('div');
56
57
  this.element.classList.add('flex-none');
57
- this.shadowRoot = Utils.createShadowRootWithCoreStyles(
58
- this.element, {cssFile: 'ui/legacy/infobar.css', delegatesFocus: undefined});
58
+ this.shadowRoot =
59
+ Utils.createShadowRootWithCoreStyles(this.element, {cssFile: infobarStyles, delegatesFocus: undefined});
59
60
 
60
61
  this.contentElement = this.shadowRoot.createChild('div', 'infobar infobar-' + type) as HTMLDivElement;
61
62
 
package/front_end/ui/legacy/InspectorView.ts CHANGED
@@ -52,6 +52,7 @@ import {ViewManager} from './ViewManager.js';
52
52
  import type {Widget} from './Widget.js';
53
53
  import {VBox, WidgetFocusRestorer} from './Widget.js';
54
54
  import * as ARIAUtils from './ARIAUtils.js';
55
+ import inspectorViewTabbedPaneStyles from './inspectorViewTabbedPane.css.legacy.js';
55
56
 
56
57
  const UIStrings = {
57
58
  /**
@@ -167,7 +168,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
167
168
 
168
169
  this.tabbedPane = this.tabbedLocation.tabbedPane();
169
170
  this.tabbedPane.element.classList.add('main-tabbed-pane');
170
- this.tabbedPane.registerRequiredCSS('ui/legacy/inspectorViewTabbedPane.css');
171
+ this.tabbedPane.registerRequiredCSS(inspectorViewTabbedPaneStyles);
171
172
  this.tabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
172
173
  this.tabbedPane.setAccessibleName(i18nString(UIStrings.panels));
173
174
  this.tabbedPane.setTabDelegate(this.tabDelegate);
@@ -210,6 +211,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
210
211
  return inspectorViewInstance;
211
212
  }
212
213
 
214
+ static maybeGetInspectorViewInstance(): InspectorView|undefined {
215
+ return inspectorViewInstance;
216
+ }
217
+
213
218
  wasShown(): void {
214
219
  this.element.ownerDocument.addEventListener('keydown', this.keyDownBound, false);
215
220
  }
package/front_end/ui/legacy/ListWidget.ts CHANGED
@@ -5,6 +5,7 @@
5
5
  import * as i18n from '../../core/i18n/i18n.js';
6
6
 
7
7
  import * as ARIAUtils from './ARIAUtils.js';
8
+ import listWidgetStyles from './listWidget.css.legacy.js';
8
9
  import {Toolbar, ToolbarButton} from './Toolbar.js';
9
10
  import {Tooltip} from './Tooltip.js';
10
11
  import {createInput, createTextButton, ElementFocusRestorer} from './UIUtils.js';
@@ -49,7 +50,7 @@ export class ListWidget<T> extends VBox {
49
50
  private emptyPlaceholder: Element|null;
50
51
  constructor(delegate: Delegate<T>, delegatesFocus: boolean|undefined = true) {
51
52
  super(true, delegatesFocus);
52
- this.registerRequiredCSS('ui/legacy/listWidget.css');
53
+ this.registerRequiredCSS(listWidgetStyles);
53
54
  this.delegate = delegate;
54
55
 
55
56
  this.list = this.contentElement.createChild('div', 'list');
package/front_end/ui/legacy/PopoverHelper.ts CHANGED
@@ -29,6 +29,7 @@
29
29
  */
30
30
 
31
31
  import {GlassPane, MarginBehavior, SizeBehavior} from './GlassPane.js';
32
+ import popoverStyles from './popover.css.legacy.js';
32
33
 
33
34
  export class PopoverHelper {
34
35
  private disableOnClick: boolean;
@@ -189,7 +190,7 @@ export class PopoverHelper {
189
190
 
190
191
  private showPopover(document: Document): void {
191
192
  const popover = new GlassPane();
192
- popover.registerRequiredCSS('ui/legacy/popover.css');
193
+ popover.registerRequiredCSS(popoverStyles);
193
194
  popover.setSizeBehavior(SizeBehavior.MeasureContent);
194
195
  popover.setMarginBehavior(MarginBehavior.Arrow);
195
196
  const request = this.scheduledRequest;
package/front_end/ui/legacy/ProgressIndicator.ts CHANGED
@@ -30,6 +30,7 @@
30
30
 
31
31
  import type * as Common from '../../core/common/common.js';
32
32
  import * as Utils from './utils/utils.js';
33
+ import progressIndicatorStyles from './progressIndicator.css.legacy.js';
33
34
 
34
35
  export class ProgressIndicator implements Common.Progress.Progress {
35
36
  element: HTMLDivElement;
@@ -46,7 +47,7 @@ export class ProgressIndicator implements Common.Progress.Progress {
46
47
  this.element = document.createElement('div');
47
48
  this.element.classList.add('progress-indicator');
48
49
  this.shadowRoot = Utils.createShadowRootWithCoreStyles(
49
- this.element, {cssFile: 'ui/legacy/progressIndicator.css', delegatesFocus: undefined});
50
+ this.element, {cssFile: progressIndicatorStyles, delegatesFocus: undefined});
50
51
  this.contentElement = this.shadowRoot.createChild('div', 'progress-indicator-shadow-container');
51
52
 
52
53
  this.labelElement = this.contentElement.createChild('div', 'title');
package/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts CHANGED
@@ -6,6 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
6
6
 
7
7
  import {Dialog} from './Dialog.js';
8
8
  import {SizeBehavior} from './GlassPane.js';
9
+ import remoteDebuggingTerminatedScreenStyles from './remoteDebuggingTerminatedScreen.css.legacy.js';
9
10
  import {createTextButton, formatLocalized} from './UIUtils.js';
10
11
  import {VBox} from './Widget.js';
11
12
 
@@ -30,7 +31,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
30
31
  export class RemoteDebuggingTerminatedScreen extends VBox {
31
32
  constructor(reason: string) {
32
33
  super(true);
33
- this.registerRequiredCSS('ui/legacy/remoteDebuggingTerminatedScreen.css');
34
+ this.registerRequiredCSS(remoteDebuggingTerminatedScreenStyles);
34
35
  const message = this.contentElement.createChild('div', 'message');
35
36
  const reasonElement = message.createChild('span', 'reason');
36
37
  reasonElement.textContent = reason;
package/front_end/ui/legacy/ReportView.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  // found in the LICENSE file.
4
4
 
5
5
  import * as ARIAUtils from './ARIAUtils.js';
6
+ import reportViewStyles from './reportView.css.legacy.js';
6
7
  import {Toolbar} from './Toolbar.js';
7
8
  import {Tooltip} from './Tooltip.js';
8
9
  import {VBox} from './Widget.js';
@@ -20,7 +21,7 @@ export class ReportView extends VBox {
20
21
  private urlElement?: HTMLElement;
21
22
  constructor(title?: string) {
22
23
  super(true);
23
- this.registerRequiredCSS('ui/legacy/reportView.css');
24
+ this.registerRequiredCSS(reportViewStyles);
24
25
 
25
26
  this.contentBox = this.contentElement.createChild('div', 'report-content-box');
26
27
  this.headerElement = this.contentBox.createChild('div', 'report-header vbox');
package/front_end/ui/legacy/RootView.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  // Use of this source code is governed by a BSD-style license that can be
3
3
  // found in the LICENSE file.
4
4
 
5
+ import rootViewStyles from './rootView.css.legacy.js';
5
6
  import {VBox} from './Widget.js';
6
7
  import {ZoomManager} from './ZoomManager.js';
7
8
 
@@ -11,7 +12,7 @@ export class RootView extends VBox {
11
12
  super();
12
13
  this.markAsRoot();
13
14
  this.element.classList.add('root-view');
14
- this.registerRequiredCSS('ui/legacy/rootView.css');
15
+ this.registerRequiredCSS(rootViewStyles);
15
16
  this.element.setAttribute('spellcheck', 'false');
16
17
  }
17
18