NativeScript / NativeScript/android

Chrome DevTools CSS Domain

未关闭
#745 2 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

backlog feature
主要语言
C++
星标
563
派生
144
平均合并
10 小时 46 分钟
30 天内合并 PR
14

描述

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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

先从 Chrome Debugging Protocol CSSAgent 文档以及 issue 中链接的 css-classes.d.ts 定义开始,然后检查现有的 computed-style preview 和 visual-tree node selection path。当剩余的、属于范围内的 CSSAgent 样式信息都暴露给 inspector,同时 pseudo-element matches 和 element fonts 仍不在范围内时,工作即告完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
cpp, css
领域
devtools
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
需要澄清
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。