Fix: Replace CSS :has() with closest() for browser compatibility#141
Merged
parhumm merged 2 commits intodevelopmentfrom Mar 9, 2026
Merged
Fix: Replace CSS :has() with closest() for browser compatibility#141parhumm merged 2 commits intodevelopmentfrom
parhumm merged 2 commits intodevelopmentfrom
Conversation
Resolves #139 - Charts were crashing in older browsers (Firefox <121, older Chrome/Safari/Edge) because the :has() pseudo-class is not supported. Using querySelector with :has() throws errors in unsupported browsers, causing chart rendering failures. Changes: - Replace querySelector(".inside:has(#chart)") with closest(".inside") - Replace querySelector(".chart-wrap:has(#chart)") with closest() - Add null checks before DOM manipulations to prevent TypeErrors
📝 WalkthroughWalkthroughReplaced CSS :has() selectors with element lookups and closest() traversals in fetchChartData(), added null checks, and switched style.display manipulations to operate on resolved chart wrapper elements. Logs a warning and aborts when required DOM containers are not found. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@admin/assets/js/slimstat-chart.js`:
- Around line 88-90: Remove the browser console warning in slimstat-chart.js:
when the guard (if (!inside || !chartWrap)) triggers for chartId, delete the
console.warn(...) call and instead either call the project's logging utility
(use the existing project logger function if available) or wrap the message
behind a non-production / debug flag so no console output appears in shipped JS;
keep the early return behavior unchanged to preserve flow when inside or
chartWrap are missing.
- Around line 82-91: In fetchChartData(), guard the DOM lookup for the data node
before dereferencing it: check the result of
document.getElementById("slimstat_chart_data_" + chartId) (the variable element)
and bail out (console.warn and return) if it's null/undefined instead of calling
element.getAttribute and JSON.parse immediately; move the JSON.parse of
element.getAttribute("data-args") to after that null check and ensure subsequent
uses of chartCanvas/inside/chartWrap remain unchanged so a missing
`#slimstat_chart_data_`<chartId> fails gracefully.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b6ecd3af-bed8-483f-b3a4-0dc4a2ed9199
📒 Files selected for processing (1)
admin/assets/js/slimstat-chart.js
admin/assets/js/slimstat-chart.js
Outdated
Comment on lines
+88
to
+90
| if (!inside || !chartWrap) { | ||
| console.warn("SlimStat: Could not find chart container elements for chart " + chartId); | ||
| return; |
There was a problem hiding this comment.
Remove the new browser-console warning from shipped code.
If you want to keep this signal, route it through a project logger or a non-production-only path instead of writing to the browser console.
Suggested fix
if (!inside || !chartWrap) {
- console.warn("SlimStat: Could not find chart container elements for chart " + chartId);
return;
}As per coding guidelines, **/*.js: Do not include var_dump(), console.log(), or debug code in shipped JavaScript; remove before release.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| if (!inside || !chartWrap) { | |
| console.warn("SlimStat: Could not find chart container elements for chart " + chartId); | |
| return; | |
| if (!inside || !chartWrap) { | |
| return; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@admin/assets/js/slimstat-chart.js` around lines 88 - 90, Remove the browser
console warning in slimstat-chart.js: when the guard (if (!inside ||
!chartWrap)) triggers for chartId, delete the console.warn(...) call and instead
either call the project's logging utility (use the existing project logger
function if available) or wrap the message behind a non-production / debug flag
so no console output appears in shipped JS; keep the early return behavior
unchanged to preserve flow when inside or chartWrap are missing.
Contributor
|
Review note from manual pass:
Suggestion: move hide/show + spinner cleanup into a shared helper (or a |
Contributor
Human QA Checklist for PR #141 (
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Close #139 - Charts were crashing in older browsers (Firefox <121, older Chrome/Safari/Edge) because the :has() pseudo-class is not supported. Using querySelector with :has() throws errors in unsupported browsers, causing chart rendering failures.
Changes:
Describe your changes
...
Submission Review Guidelines:
CHANGELOG.md.Type of change
Summary by CodeRabbit