feat: 新增两个新的代码块样式配色+新增主区宽屏窄屏切换按钮 #4
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds new code styling themes and a content width toggle button to enhance the flomo notes experience. The changes introduce modern light and dark code highlighting themes, improve the existing UI styling, and add a width toggle feature for better content viewing.
- Adds two new modern code highlighting themes (modern-dark.css and modern-light.css)
- Implements a content width toggle button for switching between wide and narrow display modes
- Updates the popup interface with better styling and Chinese localization
- Enhances code block styling with language labels and improved copy functionality
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| service-worker.js | Changes default theme from stackoverflow-dark.css to modern-dark.css |
| scripts/content.js | Adds width toggle functionality and enhances code highlighting UI |
| popup/popup.html | Updates popup styling and adds Chinese theme names |
| include/theme/modern-light.css | New modern light theme for code highlighting |
| include/theme/modern-dark.css | New modern dark theme for code highlighting |
| README.md | Documents the new features |
| CLAUDE.md | Adds project documentation for Claude AI |
| null, | ||
| XPathResult.FIRST_ORDERED_NODE_TYPE, | ||
| null | ||
| ).singleNodeValue; |
There was a problem hiding this comment.
The hardcoded XPath selector is fragile and will break if the DOM structure changes. Consider using a more robust selector approach with CSS selectors and fallback mechanisms.
| ).singleNodeValue; | |
| // 优先使用CSS选择器查找目标元素，若失败则回退到XPath | |
| let targetElement = document.querySelector('section > div:nth-child(3)'); | |
| if (!targetElement) { | |
| const xpath = "/html/body/div[1]/div[1]/section/div[1]/div[3]"; | |
| targetElement = document.evaluate( | |
| xpath, | |
| document, | |
| null, | |
| XPathResult.FIRST_ORDERED_NODE_TYPE, | |
| null | |
| ).singleNodeValue; | |
| } |
| chrome.storage.local.set({ isWideMode: newMode }); | ||
|
|
||
| if (newMode) { | ||
| setContentWidth('900px'); |
There was a problem hiding this comment.
The hardcoded width value '900px' should be configurable or defined as a constant for better maintainability.
| setContentWidth('900px'); | |
| setContentWidth(WIDE_MODE_WIDTH); |
| // 使用MutationObserver监听DOM变化，确保在页面动态加载后也能应用样式 | ||
| function observeAndSetWidth() { | ||
| // 初始化设置 | ||
| setTimeout(initializeWidth, 100); |
There was a problem hiding this comment.
Magic number 100ms timeout should be defined as a named constant to explain its purpose and make it easily adjustable.
| setTimeout(initializeWidth, 100); | |
| setTimeout(initializeWidth, DOM_UPDATE_DELAY_MS); |
| }); | ||
|
|
||
| if (shouldCheck) { | ||
| setTimeout(initializeWidth, 100); // 延迟执行，确保DOM完全加载 |
There was a problem hiding this comment.
Using setTimeout for DOM readiness is unreliable. Consider using requestAnimationFrame or checking for element existence before proceeding.
| setTimeout(initializeWidth, 100); // 延迟执行，确保DOM完全加载 | |
| waitForContentElement(initializeWidth); // 等待目标元素出现后再初始化 |
| widthBtn.style.color = '#fff'; | ||
| widthBtn.style.cursor = 'pointer'; | ||
| widthBtn.style.position = 'fixed'; | ||
| widthBtn.style.bottom = '140px'; // 在代码高亮按钮上方 |
There was a problem hiding this comment.
The hardcoded positioning value '140px' should be calculated relative to other buttons or defined as a constant for better maintainability.
| widthBtn.style.bottom = '140px'; // 在代码高亮按钮上方 | |
| widthBtn.style.bottom = WIDTH_BTN_BOTTOM_OFFSET; // 在代码高亮按钮上方 |
1 participant
feat: 新增两个新的代码块样式配色
feat: 新增主区宽屏窄屏切换按钮