chrome-devtools-frontend 1.0.1654411 → 1.0.1656291

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 (196) hide show
  1. package/.agents/skills/ui-eng-vision-local-lit-renderer/SKILL.md +116 -0
  2. package/.agents/skills/ui-eng-vision-logic-consolidator/SKILL.md +82 -0
  3. package/.agents/skills/ui-eng-vision-orchestrator/SKILL.md +123 -0
  4. package/.agents/skills/ui-eng-vision-test-scaffolder/SKILL.md +125 -0
  5. package/.agents/skills/ui-eng-vision-widget-promoter/SKILL.md +75 -0
  6. package/AUTHORS +1 -0
  7. package/config/owner/COMMON_OWNERS +0 -4
  8. package/docs/playbook.md +1 -1
  9. package/front_end/Tests.js +1 -0
  10. package/front_end/core/common/Settings.ts +47 -30
  11. package/front_end/core/sdk/CPUThrottlingManager.ts +10 -159
  12. package/front_end/core/sdk/ConsoleModel.ts +13 -11
  13. package/front_end/core/sdk/DOMDebuggerModel.ts +11 -5
  14. package/front_end/core/sdk/EventBreakpointsModel.ts +9 -5
  15. package/front_end/core/sdk/IsolateManager.ts +6 -6
  16. package/front_end/core/sdk/ResourceTreeModel.ts +5 -3
  17. package/front_end/core/sdk/TargetManager.ts +17 -0
  18. package/front_end/entrypoints/devtools_app/devtools_app.ts +0 -1
  19. package/front_end/entrypoints/main/MainImpl.ts +12 -36
  20. package/front_end/foundation/Universe.ts +98 -3
  21. package/front_end/generated/InspectorBackendCommands.ts +5 -1
  22. package/front_end/generated/SupportedCSSProperties.js +2 -6
  23. package/front_end/generated/protocol-mapping.d.ts +8 -0
  24. package/front_end/generated/protocol-proxy-api.d.ts +15 -0
  25. package/front_end/generated/protocol.ts +36 -1
  26. package/front_end/models/ai_assistance/AiConversation.ts +0 -6
  27. package/front_end/models/ai_assistance/agents/NetworkAgent.snapshot.txt +1 -1
  28. package/front_end/models/ai_assistance/agents/PerformanceAgent.ts +2 -156
  29. package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt +0 -24
  30. package/front_end/models/ai_assistance/agents/StylingAgent.ts +2 -358
  31. package/front_end/models/ai_assistance/ai_assistance.ts +0 -6
  32. package/front_end/models/ai_assistance/contexts/RequestContext.snapshot.txt +0 -1
  33. package/front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts +0 -2
  34. package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts +1 -14
  35. package/front_end/models/autofill_manager/AutofillManager.ts +1 -2
  36. package/front_end/models/javascript_metadata/NativeFunctions.js +1 -1
  37. package/front_end/models/persistence/AutomaticFileSystemManager.ts +14 -13
  38. package/front_end/models/persistence/AutomaticFileSystemWorkspaceBinding.ts +12 -9
  39. package/front_end/models/persistence/IsolatedFileSystemManager.ts +18 -9
  40. package/front_end/models/project_settings/ProjectSettingsModel.ts +12 -11
  41. package/front_end/models/trace/handlers/ScreenshotsHandler.ts +14 -59
  42. package/front_end/panels/ai_assistance/AiAssistancePanel.ts +3 -29
  43. package/front_end/panels/application/DeviceBoundSessionsView.ts +15 -3
  44. package/front_end/panels/application/FrameDetailsView.ts +2 -1
  45. package/front_end/panels/application/ServiceWorkersView.ts +23 -16
  46. package/front_end/panels/common/CPUThrottlingOption.ts +142 -0
  47. package/front_end/panels/common/ThrottlingUtils.ts +9 -4
  48. package/front_end/panels/common/common.ts +1 -1
  49. package/front_end/panels/console/ConsoleViewMessage.ts +45 -0
  50. package/front_end/panels/elements/ElementsPanel.ts +0 -74
  51. package/front_end/panels/elements/ElementsTreeOutline.ts +0 -4
  52. package/front_end/panels/emulation/DeviceModeToolbar.ts +46 -45
  53. package/front_end/panels/mobile_throttling/CalibrationController.ts +6 -5
  54. package/front_end/panels/mobile_throttling/MobileThrottlingSelector.ts +1 -1
  55. package/front_end/panels/mobile_throttling/ThrottlingManager.ts +40 -13
  56. package/front_end/panels/mobile_throttling/ThrottlingPresets.ts +13 -17
  57. package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts +15 -13
  58. package/front_end/panels/network/NetworkLogView.ts +0 -9
  59. package/front_end/panels/network/NetworkPanel.ts +1 -63
  60. package/front_end/panels/network/RequestInitiatorView.ts +29 -4
  61. package/front_end/panels/network/components/HeaderSectionRow.css +9 -7
  62. package/front_end/panels/network/components/HeaderSectionRow.ts +20 -1
  63. package/front_end/panels/network/components/RequestHeaderSection.css +5 -3
  64. package/front_end/panels/network/components/RequestHeaderSection.ts +1 -2
  65. package/front_end/panels/network/components/RequestHeadersView.css +1 -1
  66. package/front_end/panels/security/SecurityPanel.ts +36 -23
  67. package/front_end/panels/settings/SettingsScreen.ts +18 -103
  68. package/front_end/panels/settings/settings-meta.ts +0 -24
  69. package/front_end/panels/timeline/TimelineController.ts +3 -2
  70. package/front_end/panels/timeline/TimelinePanel.ts +20 -3
  71. package/front_end/panels/timeline/components/CPUThrottlingSelector.ts +15 -14
  72. package/front_end/panels/timeline/timelineFlamechartPopover.css +2 -0
  73. package/front_end/panels/utils/utils.ts +25 -24
  74. package/front_end/third_party/chromium/README.chromium +1 -1
  75. package/front_end/third_party/puppeteer/README.chromium +2 -2
  76. package/front_end/third_party/puppeteer/package/lib/es5-iife/puppeteer-core-browser.d.ts +34 -55
  77. package/front_end/third_party/puppeteer/package/lib/es5-iife/puppeteer-core-browser.js +96 -83
  78. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/Browser.d.ts +10 -1
  79. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/Browser.d.ts.map +1 -1
  80. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/Browser.js.map +1 -1
  81. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/BrowserContext.d.ts.map +1 -1
  82. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/BrowserContext.js +1 -1
  83. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/BrowserContext.js.map +1 -1
  84. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/CDPSession.d.ts.map +1 -1
  85. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/CDPSession.js.map +1 -1
  86. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/HTTPResponse.d.ts +3 -2
  87. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/HTTPResponse.d.ts.map +1 -1
  88. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/HTTPResponse.js.map +1 -1
  89. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/Realm.d.ts.map +1 -1
  90. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/Realm.js.map +1 -1
  91. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/Target.d.ts +1 -1
  92. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/Target.js +1 -1
  93. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/locators/locators.d.ts.map +1 -1
  94. package/front_end/third_party/puppeteer/package/lib/puppeteer/api/locators/locators.js.map +1 -1
  95. package/front_end/third_party/puppeteer/package/lib/puppeteer/bidi/HTTPResponse.d.ts.map +1 -1
  96. package/front_end/third_party/puppeteer/package/lib/puppeteer/bidi/HTTPResponse.js +2 -1
  97. package/front_end/third_party/puppeteer/package/lib/puppeteer/bidi/HTTPResponse.js.map +1 -1
  98. package/front_end/third_party/puppeteer/package/lib/puppeteer/bidi/core/Realm.d.ts.map +1 -1
  99. package/front_end/third_party/puppeteer/package/lib/puppeteer/bidi/core/Realm.js.map +1 -1
  100. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/Browser.d.ts +2 -2
  101. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/Browser.d.ts.map +1 -1
  102. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/Browser.js +5 -2
  103. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/Browser.js.map +1 -1
  104. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/Frame.js +1 -1
  105. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/Frame.js.map +1 -1
  106. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/FrameManager.d.ts.map +1 -1
  107. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/FrameManager.js +23 -13
  108. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/FrameManager.js.map +1 -1
  109. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/HTTPResponse.d.ts.map +1 -1
  110. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/HTTPResponse.js +4 -1
  111. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/HTTPResponse.js.map +1 -1
  112. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/Input.js +1 -1
  113. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/LifecycleWatcher.d.ts.map +1 -1
  114. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/LifecycleWatcher.js.map +1 -1
  115. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/Target.d.ts.map +1 -1
  116. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/Target.js.map +1 -1
  117. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/WebMCP.d.ts +3 -41
  118. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/WebMCP.d.ts.map +1 -1
  119. package/front_end/third_party/puppeteer/package/lib/puppeteer/cdp/WebMCP.js.map +1 -1
  120. package/front_end/third_party/puppeteer/package/lib/puppeteer/common/ConnectOptions.d.ts.map +1 -1
  121. package/front_end/third_party/puppeteer/package/lib/puppeteer/node/BrowserLauncher.d.ts.map +1 -1
  122. package/front_end/third_party/puppeteer/package/lib/puppeteer/node/BrowserLauncher.js +4 -2
  123. package/front_end/third_party/puppeteer/package/lib/puppeteer/node/BrowserLauncher.js.map +1 -1
  124. package/front_end/third_party/puppeteer/package/lib/puppeteer/node/LaunchOptions.d.ts +5 -0
  125. package/front_end/third_party/puppeteer/package/lib/puppeteer/node/LaunchOptions.d.ts.map +1 -1
  126. package/front_end/third_party/puppeteer/package/lib/puppeteer/revisions.d.ts +1 -1
  127. package/front_end/third_party/puppeteer/package/lib/puppeteer/revisions.js +1 -1
  128. package/front_end/third_party/puppeteer/package/lib/puppeteer/util/httpUtils.d.ts +1 -1
  129. package/front_end/third_party/puppeteer/package/lib/puppeteer/util/httpUtils.d.ts.map +1 -1
  130. package/front_end/third_party/puppeteer/package/lib/puppeteer/util/httpUtils.js +5 -5
  131. package/front_end/third_party/puppeteer/package/lib/puppeteer/util/httpUtils.js.map +1 -1
  132. package/front_end/third_party/puppeteer/package/lib/puppeteer/util/version.d.ts +1 -1
  133. package/front_end/third_party/puppeteer/package/lib/puppeteer/util/version.js +1 -1
  134. package/front_end/third_party/puppeteer/package/lib/types.d.ts +34 -55
  135. package/front_end/third_party/puppeteer/package/package.json +4 -4
  136. package/front_end/third_party/puppeteer/package/src/api/Browser.ts +13 -1
  137. package/front_end/third_party/puppeteer/package/src/api/BrowserContext.ts +2 -3
  138. package/front_end/third_party/puppeteer/package/src/api/CDPSession.ts +3 -1
  139. package/front_end/third_party/puppeteer/package/src/api/HTTPResponse.ts +3 -2
  140. package/front_end/third_party/puppeteer/package/src/api/Realm.ts +1 -2
  141. package/front_end/third_party/puppeteer/package/src/api/Target.ts +1 -1
  142. package/front_end/third_party/puppeteer/package/src/api/locators/locators.ts +1 -2
  143. package/front_end/third_party/puppeteer/package/src/bidi/HTTPResponse.ts +3 -1
  144. package/front_end/third_party/puppeteer/package/src/bidi/core/Realm.ts +1 -3
  145. package/front_end/third_party/puppeteer/package/src/cdp/Browser.ts +13 -3
  146. package/front_end/third_party/puppeteer/package/src/cdp/Frame.ts +1 -1
  147. package/front_end/third_party/puppeteer/package/src/cdp/FrameManager.ts +24 -13
  148. package/front_end/third_party/puppeteer/package/src/cdp/HTTPResponse.ts +4 -1
  149. package/front_end/third_party/puppeteer/package/src/cdp/Input.ts +1 -1
  150. package/front_end/third_party/puppeteer/package/src/cdp/LifecycleWatcher.ts +1 -4
  151. package/front_end/third_party/puppeteer/package/src/cdp/Target.ts +2 -4
  152. package/front_end/third_party/puppeteer/package/src/cdp/WebMCP.ts +7 -76
  153. package/front_end/third_party/puppeteer/package/src/common/ConnectOptions.ts +1 -4
  154. package/front_end/third_party/puppeteer/package/src/node/BrowserLauncher.ts +4 -1
  155. package/front_end/third_party/puppeteer/package/src/node/LaunchOptions.ts +5 -0
  156. package/front_end/third_party/puppeteer/package/src/revisions.ts +1 -1
  157. package/front_end/third_party/puppeteer/package/src/util/httpUtils.ts +5 -5
  158. package/front_end/third_party/puppeteer/package/src/util/version.ts +1 -1
  159. package/front_end/third_party/puppeteer/third_party/parsel/README.chromium +1 -1
  160. package/front_end/ui/components/dialogs/Dialog.ts +3 -0
  161. package/front_end/ui/components/markdown_view/MarkdownLinksMap.ts +0 -7
  162. package/front_end/ui/helpers/OpenInNewTab.ts +15 -7
  163. package/front_end/ui/legacy/TabbedPane.ts +1 -108
  164. package/front_end/ui/legacy/components/data_grid/DataGrid.ts +9 -0
  165. package/front_end/ui/legacy/components/data_grid/DataGridElement.ts +172 -123
  166. package/front_end/ui/legacy/components/data_grid/DataGridExporter.ts +89 -0
  167. package/front_end/ui/legacy/components/data_grid/dataGrid.css +10 -0
  168. package/front_end/ui/legacy/components/data_grid/data_grid.ts +3 -1
  169. package/front_end/ui/legacy/components/perf_ui/FlameChart.ts +89 -40
  170. package/front_end/ui/visual_logging/KnownContextValues.ts +2 -0
  171. package/package.json +1 -1
  172. package/front_end/Images/navigationControls.png +0 -0
  173. package/front_end/Images/navigationControls_2x.png +0 -0
  174. package/front_end/Images/popoverArrows.png +0 -0
  175. package/front_end/entrypoints/greendev_floaty/FloatyEntrypoint.ts +0 -746
  176. package/front_end/entrypoints/greendev_floaty/floaty.css +0 -301
  177. package/front_end/entrypoints/greendev_floaty/floaty.html +0 -38
  178. package/front_end/entrypoints/greendev_floaty/greendev_floaty.ts +0 -415
  179. package/front_end/models/ai_assistance/agents/GreenDevAgent.ts +0 -834
  180. package/front_end/models/ai_assistance/agents/GreenDevAgentAntigravityCliSocketClient.ts +0 -53
  181. package/front_end/models/ai_assistance/agents/GreenDevAgentGeminiCliSocketClient.ts +0 -117
  182. package/front_end/models/annotations/AnnotationRepository.ts +0 -238
  183. package/front_end/models/annotations/AnnotationType.ts +0 -10
  184. package/front_end/models/annotations/README.md +0 -7
  185. package/front_end/models/annotations/annotations.ts +0 -6
  186. package/front_end/models/greendev/Prototypes.ts +0 -68
  187. package/front_end/models/greendev/README.md +0 -5
  188. package/front_end/models/greendev/greendev.ts +0 -5
  189. package/front_end/panels/common/Annotation.ts +0 -184
  190. package/front_end/panels/common/AnnotationManager.ts +0 -208
  191. package/front_end/panels/common/annotation.css +0 -40
  192. package/front_end/panels/greendev/GreenDevPanel.css +0 -282
  193. package/front_end/panels/greendev/GreenDevPanel.ts +0 -364
  194. package/front_end/panels/greendev/GreenDevShared.ts +0 -13
  195. package/front_end/panels/greendev/greendev-meta.ts +0 -52
  196. package/front_end/panels/greendev/greendev.ts +0 -9
@@ -0,0 +1,116 @@
1
+ ---
2
+ name: ui-eng-vision-local-lit-renderer
3
+ description: Migrates legacy imperative DOM construction to local declarative Lit-html templates rendered inside existing containers.
4
+ allowed-tools: code_search open_urls
5
+ ---
6
+
7
+ # Subskill: Local Lit-HTML Renderer (Pass 2)
8
+
9
+ This subskill converts consolidated imperative DOM construction helper methods
10
+ into reactive, declarative Lit-html templates, rendering them locally inside the
11
+ existing element containers.
12
+
13
+ --------------------------------------------------------------------------------
14
+
15
+ ## 1. Declarative Technology Migration
16
+
17
+ 1. **Conserve Abstraction Topology**:
18
+
19
+ * Maintain the existing class hierarchy, helper class boundaries, and
20
+ logical groups.
21
+ * Do not aggressively "flatten" classes or collapse helper abstractions
22
+ into the main view just to coerce a single master template. Pass 2
23
+ should only change the *implementation details* of rendering (imperative
24
+ -> declarative) within existing compartments, not the public API or
25
+ responsibilities of objects.
26
+
27
+ 2. **Determine Render Lifecycle per Layer**:
28
+
29
+ * **For UI.Widget classes**: Define or update `performUpdate()` to execute
30
+ the main lit `render` call, and use `this.requestUpdate()` to queue
31
+ updates.
32
+ * **For Delegate/Helper classes**: Identify the custom update hook (e.g.,
33
+ `update()` or `scheduleUpdate()`) and invoke `render()` directly inside
34
+ that method. **Do not** introduce Widget lifecycle methods
35
+ (`performUpdate`) on classes that do not inherit them.
36
+
37
+ 3. **Import Modern Templating**:
38
+
39
+ * Import the `Lit` rendering system inside the view module:
40
+
41
+ ```typescript
42
+ import {html, render, nothing} from '../../ui/lit/lit.js';
43
+ ```
44
+
45
+ 4. **Modern Component Mapping**:
46
+
47
+ * Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for
48
+ specific migration examples.
49
+ * If unsure, also consult the [automatic migration code](../../../scripts/eslint_rules/lib/no-imperative-dom-api.ts)
50
+
51
+ 5. **Local Modular Renders**:
52
+
53
+ * If the class contains multiple separate legacy container fields (e.g.,
54
+ fields generated by `appendField` or `createChild` on a parent layout),
55
+ prefer **local modular renders** (rendering templates individually into
56
+ each container) to preserve the legacy layout framework. Do not force a
57
+ monolithic template if doing so violates the existing topology.
58
+
59
+ 6. **Resolve TypeScript Type Friction**:
60
+
61
+ * Legacy DevTools elements may be typed as `Element`. Lit's `render()`
62
+ function expects `HTMLElement | DocumentFragment`.
63
+ * When rendering into legacy containers, cast the container using `as
64
+ HTMLElement` or update its class property type definition from `Element`
65
+ to `HTMLElement` to satisfy the TypeScript compiler.
66
+ * Example: `render(this.template(), this.containerField as HTMLElement);`
67
+
68
+ 7. **Delegate to Unmigrated Rendering Engines**:
69
+
70
+ * Do not attempt to rewrite complex historical subsystems (like Linkifiers
71
+ or specialized UI utilities) to be "pure Lit" during this pass.
72
+ * Capitalize on Lit's ability to interpolate standard `HTMLElement` or `Element` instances directly. Treat unmigrated utilities as "black boxes" that generate DOM, and embed their output in standard template expressions: `html`<div>${this.legacyElement}</div>``.
73
+
74
+ 8. **Handle Asynchronous DOM Updates**:
75
+
76
+ * For asynchronous callback-driven updates (e.g., elements updated in a
77
+ `.then()` callback), render the parent container or a placeholder
78
+ template first. Once the data is retrieved, execute a local `render()`
79
+ inside the callback targeting the specific sub-container.
80
+
81
+ 9. **Template Factorization Strategies**:
82
+
83
+ * **Prefer `nothing`**: Use Lit's `nothing` sentinel instead of empty
84
+ strings `''` or empty templates for conditional rendering.
85
+ * **Parameterized Fragment Factories**: For repeated UI patterns or
86
+ intermediate layout branches, extract them into parameterized helper
87
+ functions inside the class scope returning `LitTemplate`. This avoids
88
+ monoliths, preserves readability, and reuses template cache strategies.
89
+
90
+ 10. **Visual Parity and Accessibility**:
91
+
92
+ * **Zero-Tolerance Regression**: Screenshot tests are the ground truth for this phase. Any visual diff (above 0%) in the generated screenshots is unacceptable and must be resolved before proceeding.
93
+ * **Strict Tag/Class Parity**: Do not change tag types (e.g., `span` to
94
+ `div`) or drop class names during template translation, as CSS may
95
+ depend on them.
96
+ * **Explicit Component Variants**: Modern Custom Element (e.g.
97
+ `<devtools-button>`) defaults may not match legacy appearance.
98
+ Explicitly bind `.data=${{variant: Buttons.Button.Variant.OUTLINED}}`
99
+ (or appropriate variant) rather than relying on defaults.
100
+ * **Accessibility Preservation**: Convert custom accessibility
101
+ instrumentation (like `ARIAUtils.markAsAlert()`) to native ARIA
102
+ attributes in the template (e.g., `role="alert"`, `aria-live="polite"`).
103
+
104
+ 11. **Render Templates Syntax & Code Movement**:
105
+
106
+ * Surround the expressions containing lit template literals with `//
107
+ clang-format off` and `// clang-format on` to prevent clang-format from
108
+ corrupting template indentation.
109
+ * **Minimize Code Movement**: Avoid moving existing code to a different location in the file. Put the function signature around the existing code to minimize the diff.
110
+ * The Gerrit Code Review UI cannot identify moved blocks of unchanged code.
111
+ * If blocks of code need to be reordered, create a "prefactoring" change that first extracts the code that needs to be reordered into a named helper functions and pause the migration, waiting user confirmation.
112
+
113
+ 12. **Wait for confirmation**:
114
+
115
+ * Wait for an explicit confirmation from the user before proceeding to the
116
+ next step.
@@ -0,0 +1,82 @@
1
+ ---
2
+ name: ui-eng-vision-logic-consolidator
3
+ description: Consolidates manual DOM creation, updates, and constructors into private helper methods and structured state interfaces.
4
+ allowed-tools: code_search open_urls
5
+ ---
6
+
7
+ # Subskill: Logic Consolidator (Pass 1)
8
+
9
+ This subskill extracts manual layout building, attribute modifications, and
10
+ rendering loops out of the constructor and scattered event handlers,
11
+ consolidating them into private helper methods with explicit data contracts.
12
+
13
+ --------------------------------------------------------------------------------
14
+
15
+ ## 1. Logic Consolidation Rules
16
+
17
+ 1. **Identify UI updates Creation**:
18
+
19
+ * Scan the class constructor and search for manual DOM operations (e.g.,
20
+ `element.createChild('div')`, `document.createElement`,
21
+ `element.appendChild`).
22
+ * Also look for any UI updates which call lit-html `render`.
23
+
24
+ 2. **Isolate Update and Draw Operations**:
25
+
26
+ * Group the imperative creation/update lines into dedicated private helper
27
+ methods (e.g., `#updateSummaryBar(...)` or `#createEditorToolbar(...)`).
28
+ * Group event-handling updates (e.g., state variables like `pageSize`,
29
+ modified during buttons clicks) into centralized functions like
30
+ `onPageSizeChanged`.
31
+
32
+ 3. **Define the State Interface**:
33
+
34
+ * Identify the class state and ensure it is captured in the private member
35
+ variables, e.g.
36
+
37
+ ```typescript
38
+ #entries: Entry[];
39
+ #canGoBack: boolean;
40
+ #canGoForward: boolean;
41
+ #staleWarningVisible: boolean;
42
+ ```
43
+
44
+ * Replace direct mutations of UI with updates to these member variables,
45
+ followed by a call to the public `performUpdate()` method that is
46
+ calling previously extracted update helpers. Use this specific
47
+ identifier.
48
+
49
+ * If there's only one or two update helpers, consider inlining them into the
50
+ `performUpdate`.
51
+
52
+ 4. **Extract/Consolidate Rendering Operations**:
53
+
54
+ * If Logic First (imperative DOM remains), make sure all updates to the UI
55
+ go through the performUpdate method
56
+ * If Lit First (Lit template already exists), make sure there's a single
57
+ master call to Lit render inside performUpdate. The master template
58
+ might include calls to the helper functions e.g.
59
+
60
+ ```typescript
61
+ render(html`
62
+ <div class="specific-view">
63
+ <span>View Title</span>
64
+ ${this.renderOverviewSection()}
65
+ </div>
66
+ `, this.contentElement);
67
+ ```
68
+
69
+ 5. **Minimize Diffs (Safety Rule)**:
70
+
71
+ * Avoid moving existing code to a different location in the file. Put the
72
+ function signature around the existing code to minimize the diff.
73
+ * The Gerrit Code Review UI cannot identify moved blocks of unchanged
74
+ code.
75
+ * If blocks of code need to be reordered, create a "prefactoring" change
76
+ that first extracts the code that needs to be reordered into named
77
+ helper functions and pause the migration, waiting for user confirmation.
78
+
79
+ 6. **Wait for confirmation**:
80
+
81
+ * Wait for an explicit confirmation from the user before proceeding to the
82
+ next step.
@@ -0,0 +1,123 @@
1
+ ---
2
+ name: ui-eng-vision-orchestrator
3
+ description: High-level orchestrator for managing multi-pass migration of Chrome DevTools legacy components to the modern UI engineering vision (UI.Widget & Lit-html).
4
+ allowed-tools: code_search open_urls search_changelists data_analysis import_skill close_skill
5
+ ---
6
+
7
+ # UI Engineering Vision Orchestrator: Meta-Skill Instructions
8
+
9
+ This meta-skill acts as the central coordinator for modernizing legacy Chrome
10
+ DevTools views into declarative `UI.Widget` components based on lit-html,
11
+ managing a multi-pass sequential CL pipeline to ensure each code modification is
12
+ small, testable, and highly reviewable.
13
+
14
+ Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for general principles.
15
+
16
+ --------------------------------------------------------------------------------
17
+
18
+ ## 1. Migration Philosophy & Plan-Validate-Execute Pattern
19
+
20
+ 1. **The Plan-Validate-Execute Principle**: For each target file, the
21
+ orchestrator must first generate a structured `migration_plan.md` listing
22
+ the exact transformations, file targets, and subskills allocated for each
23
+ pass.
24
+ 2. **User Acceptance Gate**: The orchestrator must halt execution and present
25
+ the migration plan to the user. No code modification, subskill loading, or
26
+ CL staging can occur until the user explicitly accepts the plan.
27
+ 3. **No Assumptions on Inheritance**: Do not assume the class hierarchy in a
28
+ file matches older patterns or generic examples. Always perform a structure
29
+ analysis of the active file first and adapt the plan to the actual, current
30
+ code.
31
+ 4. **Hybrid Files**: Files may contain multiple classes in different states of
32
+ modernization (e.g., one partially migrated class and one fully legacy
33
+ class). Propose modifications only for classes with actual violations.
34
+ 5. **Coupling Analysis**: Always check the integration files (e.g., sidebar
35
+ files, parent panel files) where the target class is instantiated to see if
36
+ there are any direct `.element` or `.contentElement` couplings. If found,
37
+ include the decoupling of these references in the plan.
38
+ 6. **Neighboring Component Reference**: Inspect neighboring modernized files of
39
+ the same archetype (e.g., `DOMStorageItemsView.ts` or
40
+ `KeyValueStorageItemsView.ts` for storage-like components) to find proven
41
+ patterns for toolbar and data-grid configurations.
42
+ 7. **The Narrow Bridge Principle**: Keep code modifications tightly scoped to a
43
+ single responsibility per CL. Do not combine technology migrations (e.g.,
44
+ converting imperative DOM to Lit-html) with base class refactoring in the
45
+ same diff.
46
+ 8. **Never Break Compilation**: Run a compiler build and execute the DevTools
47
+ test suite between every pass.
48
+ 9. **Establish Comprehensive Guardrails First**: Ensure both **logic tests**
49
+ (verifying presenter interactions and state updates) and **screenshot tests**
50
+ (verifying layout/styling) exist before rewriting code. If coverage is
51
+ missing, scaffold it first.
52
+
53
+ --------------------------------------------------------------------------------
54
+
55
+ ## 2. Multi-Pass Execution Lifecycle
56
+
57
+ ### Plan Generation (Gated)
58
+
59
+ * **Actions**:
60
+ 1. Scan the target file to determine size, complexity, legacy elements
61
+ (e.g., `ReportView`, `ToolbarButton`, `DataGrid`, `TreeOutline`), and
62
+ actual class inheritance. Deconstruct the file mentally (or in the plan)
63
+ into **Business Logic** (state, event handlers) and **Rendering Logic**
64
+ (DOM creation, CSS classes). Reference code elements by **Name** (not
65
+ line numbers) to ensure the plan remains valid as the codebase evolves.
66
+ Check if the class dependencies have been migrated to the ui eng vision or not.
67
+ 2. Check the files depending on this file, to understand how the code in
68
+ this file is being used.
69
+ 3. **Dynamic Ordering Decision**: Determine whether to run
70
+ Logic Consolidation first or Local lit-html rendering first:
71
+ * **Option A (Logic First)**: Choose this if the component has a
72
+ complex, nested state model or highly coupled event-handlers.
73
+ Consolidating the state variables and defining the `ViewInput`
74
+ interface first provides a clean data contract, making the
75
+ subsequent template conversion highly deterministic.
76
+ * **Option B (Technology First)**: Choose this if the component has a
77
+ relatively simple state flow but massive, deeply nested imperative
78
+ DOM construction. Converting the layout to declarative Lit templates
79
+ first (using temporary inline or local state) makes it much easier
80
+ to isolate and group the remaining state updates afterward.
81
+ 4. Generate a `migration_plan.md` reflecting this ordering and outlining
82
+ the target steps.
83
+ 5. Halt execution and print the formatted plan in Markdown to the chat.
84
+ Wait for user approval.
85
+
86
+ ### Baseline & Safety Scaffolding
87
+
88
+ * **Trigger Condition**: User explicitly says "I accept the plan" or
89
+ equivalent.
90
+ * **Subskill to Import**: `ui-eng-vision-test-scaffolder`
91
+ * **Actions**:
92
+ 1. Verify existing test coverage. Propose and add missing **logic tests**
93
+ for interactions and **screenshot tests** for visual validation to avoid regressions.
94
+ 2. Pay extra attention not to skip this step.
95
+
96
+ ### Logic Consolidation
97
+
98
+ * **Trigger Condition**: Baseline tests green (or respective previous pass
99
+ staged).
100
+ * **Subskill to Import**: `ui-eng-vision-logic-consolidator`
101
+ * **Actions**:
102
+ 1. Extract manual elements, constructor DOM configurations, and imperative
103
+ updates into private update helper methods with structured
104
+ state-passing.
105
+
106
+ ### Local Lit-HTML Rendering (Technology Migration)
107
+
108
+ * **Trigger Condition**: Previous pass staged.
109
+ * **Subskill to Import**: `ui-eng-vision-local-lit-renderer`
110
+ * **Actions**:
111
+ 1. Migrate imperative elements to declarative templates (using component
112
+ mapping rules defined inside the subskill) and render them locally
113
+ within the existing view.
114
+
115
+ ### Widget Promotion (Architectural Bridge)
116
+
117
+ * **Trigger Condition**: Both local template rendering and logic consolidation
118
+ staged.
119
+ * **Subskill to Import**: `ui-eng-vision-widget-promoter`
120
+ * **Actions**:
121
+ 1. Promote view classes to modern `UI.Widget` classes, hook up
122
+ `performUpdate()` delegates, export the default view layout, and clean
123
+ up legacy wrappers.
@@ -0,0 +1,125 @@
1
+ ---
2
+ name: ui-eng-vision-test-scaffolder
3
+ description: Scaffolds unit tests and screenshot tests to establish visual and functional rendering baselines for views before refactoring.
4
+ allowed-tools: code_search open_urls
5
+ ---
6
+
7
+ # Subskill: Test Scaffolder
8
+
9
+ This subskill establishes the safety net of existing and new visual/functional
10
+ tests before any codebase modifications occur, ensuring that no rendering or
11
+ logical regressions are introduced during modernization.
12
+
13
+ --------------------------------------------------------------------------------
14
+
15
+ ## 1. Test Verification Lifecycle
16
+
17
+ 1. **Verify Existing Tests**:
18
+
19
+ * Inspect the corresponding unit test file (e.g., `IndexedDBViews.test.ts`
20
+ for `IndexedDBViews.ts`) under the target folder or `test/unittests/`.
21
+ * Check for **logic tests** (verifying presenter interactions and view function callbacks).
22
+ * Check for screenshot or interaction tests (under `test/interactions/` or
23
+ `test/goldens/`) matching the visual component to verify layout and styling.
24
+
25
+ 2. **Detect Sub-component Testing Gaps (Hybrid Files)**:
26
+
27
+ * Identify if the existing test suite only covers one class of a hybrid
28
+ file while missing another class being migrated (e.g., tests exist for
29
+ `IDBDatabaseView` but are scarce/missing for `IDBDataView`).
30
+
31
+ 3. **Scaffold Missing Tests**:
32
+
33
+ * If **logic tests** are missing, draft tests verifying that callbacks trigger the expected state updates or model interactions.
34
+ * If **rendering/screenshot tests** are missing or inadequate for the legacy class being
35
+ migrated, draft a basic Mocha/Chai rendering test.
36
+ * Verify that the component compiles and mounts successfully inside a
37
+ synthetic DOM helper or unit-test container.
38
+ * **Screenshot Tests**: Create screenshot tests to establish visual baselines before refactoring. Follow the pattern seen in `CategorizedBreakpointsSidebarPane.test.ts`:
39
+ * First run the test having `renderElementIntoDOM` with `{includeCommonStyles: true}` to ensure styles are applied.
40
+ * The first run will generate the screenshot.
41
+ * Now try removing `{includeCommonStyles: true}` to see if class is
42
+ adding the styles itself. If the test pass, keep the version without
43
+ `{includeCommonStyles: true}`. Otherwise, bring it back.
44
+ * Screenshot tests are unittests that render either the full widget (if not migrated to the MVP architecture) or its view function (if already in MVP shape).
45
+ * When testing view-separated components, prefer testing the View function (e.g., `DEFAULT_VIEW`) directly by passing mock state and callbacks.
46
+ * Use `assertScreenshot` to capture and verify the visual output.
47
+ * Example structure:
48
+
49
+ ```typescript
50
+ it('renders the view', async () => {
51
+ const target = document.createElement('div');
52
+ renderElementIntoDOM(target, {includeCommonStyles: true});
53
+ MyComponent.DEFAULT_VIEW(mockViewInput, undefined, target);
54
+ await assertScreenshot('my_component/base.png');
55
+ });
56
+ ```
57
+
58
+ 4. **Wait for confirmation**:
59
+
60
+ * Wait for an explicit confirmation from the user before proceeding to the next step.
61
+
62
+ --------------------------------------------------------------------------------
63
+
64
+ ## 2. Environment Detection & Test Execution Guide
65
+
66
+ Always detect the execution environment first to run tests successfully:
67
+
68
+ ### Scenario A: Google-Internal Cog/Cider Workspaces (PRIMARY PATH for Google Workspaces)
69
+
70
+ * **Detection**: Triggered if the workspace path starts with `/google/cog/` or
71
+ `/google/src/`.
72
+ * **Why it is required**: Raw commands like `npm run test` or `autoninja` fail
73
+ because they lack Google cloudtop/virtualization wrapper configurations.
74
+ * **Resolution Steps**:
75
+
76
+ 1. Do not run `npm run test` or standard `autoninja` directly.
77
+ 2. Leverage the Google-specific Cider testing script to compile and run
78
+ tests in the cloud workspace:
79
+
80
+ ```bash
81
+ python3 internal/infra/scripts/cider/init_workspace.py test /google/cog/cloud/username/workspace_name --test_filter=front_end/panels/application/IndexedDBViews.test.ts
82
+ ```
83
+
84
+ ### Scenario B: Standard Chromium Environment (Fallback)
85
+
86
+ * **Detection**: Triggered if in an open-source or local standard Chromium
87
+ checkout without Cog paths.
88
+ * **Troubleshooting vpython3 / depot_tools errors**:
89
+
90
+ * **Symptom**: Command fails with `vpython3: command not found` or
91
+ `python3_bin_reldir.txt not found`.
92
+ * **Resolution Steps**:
93
+
94
+ 1. Export `depot_tools` path:
95
+
96
+ ```bash
97
+ export PATH=$PATH:/path/to/depot_tools
98
+ ```
99
+
100
+ 2. Initialize the depot_tools binaries by running update/gclient help
101
+ once from the checkout root:
102
+
103
+ ```bash
104
+ update_depot_tools
105
+ ```
106
+
107
+ 3. Execute the tests:
108
+
109
+ ```bash
110
+ npm run test -- front_end/panels/application/IndexedDBViews.test.ts
111
+ ```
112
+
113
+ ### Scenario C: ESLint TS Module Resolution Failure (ERR_UNKNOWN_FILE_EXTENSION)
114
+
115
+ * **Symptom**: Running lint checks fails with: `TypeError
116
+ [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for
117
+ scripts/eslint_rules/...`
118
+ * **Resolution Steps**:
119
+
120
+ 1. Compile the custom eslint rules and build assets first so that Node can
121
+ parse the rules:
122
+
123
+ ```bash
124
+ npm run build
125
+ ```
@@ -0,0 +1,75 @@
1
+ ---
2
+ name: ui-eng-vision-widget-promoter
3
+ description: Promotes legacy views to modern UI.Widget classes, hooks up performUpdate() rendering, and exports default views.
4
+ allowed-tools: code_search open_urls
5
+ ---
6
+
7
+ # Subskill: Widget Promoter (Pass 3)
8
+
9
+ This subskill completes the architectural transition, upgrading the component
10
+ from legacy base classes (like `SimpleView` or custom wrapper layouts) into
11
+ clean `UI.Widget` classes that use native update rendering delegates.
12
+
13
+ --------------------------------------------------------------------------------
14
+
15
+ ## 1. Widget Promotion Guidelines
16
+
17
+ 1. **Change Class Inheritance**:
18
+
19
+ * Rewrite class declarations to extend `UI.Widget` (or specialized
20
+ sub-layouts like `UI.Widget.VBox`).
21
+ * Clean up and remove older constructors that perform custom container
22
+ initializations or access `.element` directly for manual append
23
+ operations.
24
+
25
+ 2. **Upgrade View Delegates & Inject View**:
26
+
27
+ * Migrate the local Lit template strings into a formally exported default
28
+ view layout:
29
+
30
+ ```typescript
31
+ export const DEFAULT_VIEW: View = (input, output, target) => {
32
+ Lit.render(html`...`, target);
33
+ };
34
+ ```
35
+
36
+ * Make the view injectable in the constructor for testability (as per `docs/ui_engineering.md`):
37
+
38
+ ```typescript
39
+ class MyWidget extends UI.Widget.VBox {
40
+ #view: View;
41
+ constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
42
+ super(true, element);
43
+ this.#view = view;
44
+ }
45
+ ```
46
+
47
+ * Implement the standard modern `performUpdate()` override on the widget:
48
+
49
+ ```typescript
50
+ override performUpdate(): void {
51
+ this.#view(this.viewInput, this.viewOutput, this.contentElement);
52
+ }
53
+ ```
54
+
55
+ 3. **Clean Up Legacy Wrappers**:
56
+
57
+ * Remove any `LegacyWrapper` bindings or custom wrappable custom elements.
58
+ * Replace old panel instantiations with standard `<devtools-widget>`
59
+ declarative entries:
60
+
61
+ ```typescript
62
+ html`<devtools-widget .widgetConfig=${widgetConfig(MyWidgetClass, [params])}></devtools-widget>`
63
+ ```
64
+
65
+ * Inspect instantiator files (e.g., `ApplicationPanelSidebar.ts`) and
66
+ decouple any direct accesses to `.element`.
67
+
68
+ --------------------------------------------------------------------------------
69
+
70
+ ## 2. Safety & Verification Rules
71
+
72
+ * **CRITICAL**: Never update screenshot goldens without explicit consent of the user. Most likely the failure points to an issue in the implementation or (less likely) the test itself. Look at the screenshot diffs to debug.
73
+ * **Minimal Code Movement**: When migrating, try to move code around as little as possible, in particular around the lit rendering helpers. This minimizes the git diff and improves reviewability.
74
+
75
+ --------------------------------------------------------------------------------
package/AUTHORS CHANGED
@@ -49,6 +49,7 @@ Gautham Banasandra <gautham.bangalore@gmail.com>
49
49
  Han Xu <suyanhanx@gmail.com>
50
50
  Helmut Januschka <helmut@januschka.com>
51
51
  Henry Lim <henry@limhenry.xyz>
52
+ Hojeong Park <parkhj062@gmail.com>
52
53
  Jacky Hu <flameddd@gmail.com>
53
54
  Jake Mulhern <mulherje@gmail.com>
54
55
  Jan Keitel <jan.keitel@gmail.com>
@@ -2,19 +2,15 @@ file://config/owner/ENG_REVIEW_OWNERS
2
2
 
3
3
  alexrudenko@chromium.org
4
4
  alinavarkki@chromium.org
5
- andoli@chromium.org
6
5
  bmeurer@chromium.org
7
- changhaohan@chromium.org
8
6
  cjamcl@chromium.org
9
7
  dsv@chromium.org
10
- ergunsh@chromium.org
11
8
  finnur@chromium.org
12
9
  jacktfranklin@chromium.org
13
10
  kimanh@chromium.org
14
11
  kprokopenko@chromium.org
15
12
  leese@chromium.org
16
13
  mathias@chromium.org
17
- nancyly@chromium.org
18
14
  nharshunova@chromium.org
19
15
  nroscino@chromium.org
20
16
  nvitkov@chromium.org
package/docs/playbook.md CHANGED
@@ -36,7 +36,7 @@ For certain topics, there are dedicated points of contact (PoCs) within the DevT
36
36
  | Topic | PoC |
37
37
  | ------------------------------------- | --------------- |
38
38
  | Web Compass, Interop, and Baseline | pfaffe@chromium.org |
39
- | UI Capabilities | changhaohan@chromium.org |
39
+ | UI Capabilities | pfaffe@chromium.org |
40
40
  | Performance | paulirish@chromium.org |
41
41
  | JavaScript | szuend@chromium.org |
42
42
  | WebAssembly | pfaffe@chromium.org |
@@ -958,6 +958,7 @@
958
958
  ...Main.Main.instanceForTest.createSettingsStorage(prefs),
959
959
  settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
960
960
  runSettingsMigration: false,
961
+ console: Common.Console.Console.instance(),
961
962
  });
962
963
 
963
964
  const localSetting = Common.Settings.Settings.instance().createLocalSetting('local', undefined);