Chrome DevTools CSS Domain

Implement the CSSAgent, part of the Chrome Debugging Protocol, inside Chrome DevTools.

Features:

• Preview CSS styles used in application/page
• Preview computed styles
• Preview inline styles

Requirements:

ping @vakrilov @hshristov @PanayotCankov

In order to display proper styles information, the CSS agent needs to be sent information following a very specific interface for the selected node in the visual tree.

Selecting an element from the DOM requires the following information to be computed and sent to the inspector:

• Inline styles -> CSSStyle
• Style matches -> RuleMatch[]
• Inherited styles -> InheritedStyleEntry[]
• (out of the 3.1 scope) Pseudo Element matches -> PseudoElementMatches[]
• Computed Styles for node -> CSSComputedStyleProperty[]
• (out of the 3.1 scope) Element Fonts -> PlatformFontUsage

CSSStyle, RuleMatch, InheritedStyleEntry, PseudoElementMatches, CSSComputedStyleProperty, PlatformFontUsage classes' definitions can be previewed at https://github.com/NativeScript/android-runtime/blob/43f9bd0ff7cc96e0560bf5f965ee5f01e19f12d5/test-app/app/src/main/assets/app/css-classes.d.ts#L3

Part of Epic #563

Bắt đầu với tài liệu Chrome Debugging Protocol CSSAgent và các định nghĩa css-classes.d.ts được liên kết trong issue, sau đó kiểm tra bản xem trước kiểu đã tính toán hiện có và đường dẫn chọn node của cây trực quan. Công việc hoàn tất khi thông tin kiểu CSSAgent còn lại trong phạm vi được cung cấp cho inspector, trong khi các kết quả khớp pseudo-element và font của element vẫn nằm ngoài phạm vi.