fix: display debug hover view with correct size config #4338
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
warning eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options. Walkthrough这次修改在 Changes
Sequence Diagram(s)sequenceDiagram
participant EVT as TreeNodeEvent
participant HoverView as DebugHoverView
participant Layout as 布局管理器
EVT->>HoverView: 触发 DidChangeExpansionState 事件
alt 获取到 wrapper 边界信息
HoverView->>HoverView: 计算最大高度 = 视口高度 - wrapper.top - 状态栏高度 - 默认底部边距
else 无边界信息
HoverView->>HoverView: 使用 DEFAULT_MAX_HEIGHT 作为最大高度
end
HoverView->>Layout: 更新 treeLayoutHeight，实现自适应布局
Suggested reviewers
Tip 🌐 Web search-backed reviews and chat
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/debug/src/browser/editor/debug-hover.view.tsx (1)
52-52: 建议将魔法数字提取为常量在计算树高度时使用了魔法数字
22，建议将其提取为有意义的常量，以提高代码的可维护性。+const TREE_NODE_HEIGHT = 22; const treeHeight = Math.max( DEFAULT_LAYOUT_HEIGHT, - (model.treeModel?.root.branchSize || 0) * 22 + (model.treeModel?.root.branchSize || 0) * TREE_NODE_HEIGHT );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/debug/src/browser/editor/debug-hover.view.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: build (macos-latest, 20.x)
- GitHub Check: ubuntu-latest, Node.js 20.x
- GitHub Check: build-windows
🔇 Additional comments (2)
packages/debug/src/browser/editor/debug-hover.view.tsx (2)
6-6: 代码结构清晰，依赖注入使用恰当！新增的常量定义和依赖注入的使用都很合理，有助于提高代码的可维护性和可配置性。
Also applies to: 23-23, 26-27
51-61: 布局逻辑优化合理，提升了用户体验！新的高度计算逻辑考虑了视口高度、状态栏高度和底部边距，使调试悬浮窗的展示更加合理。同时也添加了合适的回退机制，代码健壮性很好。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #4338 +/- ##
==========================================
- Coverage 54.23% 54.23% -0.01%
==========================================
Files 1638 1638
Lines 100153 100153
Branches 21746 21746
==========================================
- Hits 54320 54313 -7
- Misses 38086 38091 +5
- Partials 7747 7749 +2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/debug/src/browser/editor/debug-hover.view.tsx (2)
6-6: 修正常量命名中的拼写错误常量
DEFAULT_HOVER_WEIGET_MARGIN_BOTTOM中的 "WEIGET" 拼写错误，应该是 "WIDGET"。建议修改为：
-const DEFAULT_HOVER_WEIGET_MARGIN_BOTTOM = 4; +const DEFAULT_HOVER_WIDGET_MARGIN_BOTTOM = 4;Also applies to: 23-23, 26-27
51-61: 建议提取高度计算逻辑以提高可读性当前的高度计算逻辑包含了多个条件和计算步骤，建议将其提取为独立的函数以提高可读性和可维护性。
建议重构为：
+const calculateTreeHeight = (root: any) => { + return Math.max(DEFAULT_LAYOUT_HEIGHT, (root?.branchSize || 0) * 22); +}; + +const calculateMaxHeight = (rect: DOMRect, statusBarHeight: number) => { + return window.innerHeight - rect.top - statusBarHeight - DEFAULT_HOVER_WIDGET_MARGIN_BOTTOM; +}; + disposable = model.treeModel.root.watcher.on(TreeNodeEvent.DidChangeExpansionState, () => { - const treeHeight = Math.max(DEFAULT_LAYOUT_HEIGHT, (model.treeModel?.root.branchSize || 0) * 22); + const treeHeight = calculateTreeHeight(model.treeModel?.root); const rect = wrapperRef.current?.getBoundingClientRect(); if (rect) { - const top = rect.top; - const maxHeight = - window.innerHeight - top - layoutViewSize.statusBarHeight - DEFAULT_HOVER_WEIGET_MARGIN_BOTTOM; + const maxHeight = calculateMaxHeight(rect, layoutViewSize.statusBarHeight); setTreeLayoutHeight(Math.min(maxHeight, treeHeight, DEFAULT_MAX_HEIGHT)); } else { setTreeLayoutHeight(Math.min(DEFAULT_MAX_HEIGHT, treeHeight)); } });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/debug/src/browser/editor/debug-hover.view.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: build-windows
- GitHub Check: ubuntu-latest, Node.js 20.x
- GitHub Check: unittest (macos-latest, 18.x, node)
🔇 Additional comments (1)
packages/debug/src/browser/editor/debug-hover.view.tsx (1)
21-158: 整体实现符合最佳实践组件实现遵循了 React 最佳实践：
- 使用 hooks 管理状态和副作用
- 正确处理组件清理
- 良好的关注点分离
Types
Background or solution
Before:
After:
Changelog
display debug hover view with correct size config
Summary by CodeRabbit
actions/upload-artifact的版本，从v3更新至v4。