UI improvement: clearer icons and added text description#5425
Open
UI improvement: clearer icons and added text description#5425
Conversation
Contributor
WalkthroughAdds two new icons (pixelforge, editor), updates icon font files and base64 payloads, replaces the icon selection JSON, expands demo assets and font-size utilities, and restructures a centered three-item button group in the UI. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
wled00/data/icons-ui/demo.html (1)
2-2: Consider addinglangattribute to<html>tag.The opening
<html>tag is missing thelangattribute. While this is an internal demo file (not production), adding it improves accessibility standards.🔧 Optional fix
-<html> +<html lang="en">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@wled00/data/icons-ui/demo.html` at line 2, Add a lang attribute to the opening <html> tag in demo.html (the document root <html> element) — e.g., set lang="en" or the appropriate language code — to improve accessibility and assistive technology support; update the <html> tag declaration so the document includes this attribute.wled00/data/index.css (1)
3-3: Consider quoting the URL argument for consistency.Stylelint flags the unquoted
url()argument. While unquoted data URLs are valid CSS, quoting improves consistency and is a best practice per thefunction-url-quotesrule.🔧 Optional fix
- src: url(data:font/woff2;charset=utf-8;base64,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); + src: url("data:font/woff2;charset=utf-8;base64,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");🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@wled00/data/index.css` at line 3, The unquoted data URL in the src: url(...) declaration should be wrapped in quotes to satisfy stylelint's function-url-quotes rule; update the src declaration (the src: url(data:font/woff2... ) line) to use either url("data:font/woff2...") or url('data:font/woff2...') so the data URI is quoted consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@wled00/data/icons-ui/HowTo_AddNewIcons.txt`:
- Line 7: Fix the typo in HowTo_AddNewIcons.txt by changing "Got to \"Generate
font\" tab, check unicodes are correct..." to "Go to \"Generate font\" tab,
check unicodes are correct..." so the instruction starts with "Go to" instead of
"Got to"; update the exact sentence in the file (the line containing the
"Generate font" instruction).
In `@wled00/data/index.htm`:
- Line 131: Remove the stray space in the HTML opening tag "<div >" so it's a
standard "<div>" tag; locate the occurrence of "<div >" in the markup (the
opening div element shown in the diff) and edit it to remove the extra space
before the closing angle bracket.
---
Nitpick comments:
In `@wled00/data/icons-ui/demo.html`:
- Line 2: Add a lang attribute to the opening <html> tag in demo.html (the
document root <html> element) — e.g., set lang="en" or the appropriate language
code — to improve accessibility and assistive technology support; update the
<html> tag declaration so the document includes this attribute.
In `@wled00/data/index.css`:
- Line 3: The unquoted data URL in the src: url(...) declaration should be
wrapped in quotes to satisfy stylelint's function-url-quotes rule; update the
src declaration (the src: url(data:font/woff2... ) line) to use either
url("data:font/woff2...") or url('data:font/woff2...') so the data URI is quoted
consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 7cb185de-c9f1-4378-92fa-9da09e77da80
⛔ Files ignored due to path filters (4)
wled00/data/icons-ui/fonts/wled122.svgis excluded by!**/*.svgwled00/data/icons-ui/fonts/wled122.ttfis excluded by!**/*.ttfwled00/data/icons-ui/fonts/wled122.woffis excluded by!**/*.woffwled00/data/icons-ui/fonts/wled122.woff2is excluded by!**/*.woff2
📒 Files selected for processing (8)
wled00/data/icons-ui/HowTo_AddNewIcons.txtwled00/data/icons-ui/Read Me.txtwled00/data/icons-ui/demo-files/demo.csswled00/data/icons-ui/demo.htmlwled00/data/icons-ui/selection.jsonwled00/data/icons-ui/style.csswled00/data/index.csswled00/data/index.htm
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
wled00/data/index.htm (1)
138-138: Minor: Inconsistent whitespace between attributes.Line 138 has a tab character between
type="button"andonclick=, while lines 132 and 144 use spaces between attributes. Consider using consistent spacing.🔧 Suggested fix
- <button class="btn btn-xs" title="PixelForge" type="button" onclick="window.location.href=getURL('/pixelforge.htm')"> + <button class="btn btn-xs" title="PixelForge" type="button" onclick="window.location.href=getURL('/pixelforge.htm')">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@wled00/data/index.htm` at line 138, The button element with class "btn btn-xs" and title "PixelForge" has a tab between the type="button" and onclick attributes; replace the tab with a single space so attribute spacing matches the other buttons (e.g., use a single space between type="button" and onclick="window.location.href=getURL('/pixelforge.htm')") to ensure consistent whitespace across attributes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@wled00/data/icons-ui/HowTo_AddNewIcons.txt`:
- Line 11: Update the sentence "in index.css, replace the font string at the
top, keep the "data:font/woff2;charset=utf-8;" and dont use octet-stream
(browser compatibility)." by capitalizing the first word ("In index.css") and
fixing the contraction ("don't") so it reads: In index.css, replace the font
string at the top, keep the "data:font/woff2;charset=utf-8;" and don't use
octet-stream (browser compatibility).
---
Nitpick comments:
In `@wled00/data/index.htm`:
- Line 138: The button element with class "btn btn-xs" and title "PixelForge"
has a tab between the type="button" and onclick attributes; replace the tab with
a single space so attribute spacing matches the other buttons (e.g., use a
single space between type="button" and
onclick="window.location.href=getURL('/pixelforge.htm')") to ensure consistent
whitespace across attributes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: c1346327-3d57-4543-921e-910167c17e67
📒 Files selected for processing (2)
wled00/data/icons-ui/HowTo_AddNewIcons.txtwled00/data/index.htm
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@wled00/data/index.htm`:
- Around line 132-146: The three icon-only buttons that navigate to
getURL('/edit'), getURL('/pixelforge.htm'), and getURL('/cpal.htm') currently
rely only on title attributes; add an explicit accessible name by including
aria-label attributes (e.g., aria-label="File editor", aria-label="PixelForge",
aria-label="Custom palettes") on the corresponding <button> elements or add
visually hidden text inside each button to provide the same label so screen
readers get a reliable name.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: de72c5da-cf11-4990-9e8c-a46832b399cf
📒 Files selected for processing (2)
wled00/data/index.htmwled00/data/index.js
💤 Files with no reviewable changes (1)
- wled00/data/index.js
Member
|
@DedeHai new icons look good 👍 Is there an impact on flash size? |
Member
|
@coderabbitai please verify that changes in this PR are compatible with common (modern!) browsers and WebView libraries. Also check conformance to relevant web standards like css, html, dom, javascript. |
Contributor
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 12191 🏁 Script executed: Length of output: 3144 🏁 Script executed: Length of output: 1399 🏁 Script executed: Length of output: 4756
Browser / WebView Compatibility & Standards Review✅ Compatible & Conformant
|
| Feature | Coverage |
|---|---|
display:flex + justify-content:center |
Chrome 29+, FF 28+, Safari 9+, Edge 12+ |
@font-face + WOFF2 base64 data URL (data:font/woff2;charset=utf-8;...) |
Correct MIME type; Chrome 36+, FF 39+, Safari 12+, Edge 14+ |
type="button" on <button> |
Correct — prevents form submission |
title= attributes on buttons |
Valid HTML5 accessibility |
.iconlabel text centering |
body { text-align: center; } (Line 51 of index.css) already propagates globally — labels are correctly centered by inheritance, no additional text-align needed |
| HTML5 structural validity | Flex container → wrapper <div> → <button> + <div> is valid |
index.js change (removed 2 classList toggle lines) |
Standard DOM API — no compatibility concerns |
⚠️ Minor: gap in Flexbox — Safari ≤ 14.0 / iOS ≤ 14.4
The inline gap:16px on the #btns container is the only real browser-compatibility note. Flexbox gap is not supported in Safari 3.2–14.0, with full support arriving in Safari 14.1+. On iOS, Safari gap in flex is supported from 14.5 onwards.
The pre-existing CSS rule #btns .btn-xs { margin: 0 4px; } (Line 853–854 of index.css) acts as an inadvertent fallback — on unsupported Safari versions the buttons will still appear with 4px side margins, just without the intended 16px gap. The UI remains fully functional; it's a minor cosmetic degradation only.
Note that the gap property before iOS 14.5 was implemented only for display: grid, and since both properties share the same gap name, a standard @supports (gap: 10px) check cannot reliably distinguish flex-gap support from grid-gap support — so a clean CSS-only fallback is non-trivial. Given that WLED targets modern browsers and Safari 14.0 is now ~5 years old, this is acceptable as-is.
ℹ️ Minor: aria-hidden on icon <i> elements (pre-existing pattern)
The new icon elements <i class="icons btn-icon"></i> use Private Use Area (PUA) Unicode codepoints. Without aria-hidden="true", screen readers may attempt to announce these characters. However, this is fully consistent with the existing codebase pattern (no aria-hidden usage exists anywhere in index.htm), and the buttons have title= attributes providing accessible names. This is not introduced by this PR.
ℹ️ Note: :before single-colon in icons-ui/style.css
The demo/documentation file wled00/data/icons-ui/style.css uses CSS2 single-colon :before selectors throughout. CSS3 specifies ::before (double-colon). However, this file is not part of the production build — the production font is embedded as a base64 data URL in index.css, and icons are referenced via HTML entities (, ) directly. No impact on production behaviour.
Summary: The changes are compatible with all modern browsers and WebView libraries. The only noteworthy item is gap in flexbox on Safari ≤ 14.0 / iOS ≤ 14.4, which causes a minor cosmetic degradation (slightly tighter button spacing) but no functional breakage, and is acceptable for a modern-browser-targeted embedded web UI.
🧠 Learnings used
Learnt from: CR
Repo: wled/WLED PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-13T17:45:14.848Z
Learning: Before marking work as complete, you MUST: (1) run `npm test` and ensure all tests pass, (2) build at least one hardware environment like `pio run -e esp32dev` successfully, and (3) for web UI changes, manually test the interface
Learnt from: CR
Repo: wled/WLED PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-13T17:45:14.847Z
Learning: Applies to wled00/data/**/*.js : Check for JavaScript errors in browser console after making changes to web UI JavaScript files
Learnt from: DedeHai
Repo: wled/WLED PR: 4798
File: wled00/FX.cpp:7531-7533
Timestamp: 2025-08-26T11:51:21.817Z
Learning: In WLED PR `#4798`, DedeHai confirmed that certain gamma-related calls in FX.cpp/FX_fcn.cpp/particle systems are intentional for effect-level shaping (e.g., brightness curves, TV sim, Pride 2015 pre-mix), distinct from final output gamma. Do not flag or remove these in future reviews; add comments when feasible to clarify intent.
Learnt from: softhack007
Repo: wled/WLED PR: 0
File: :0-0
Timestamp: 2025-11-14T13:37:11.994Z
Learning: In WLED code reviews, when code is modified or added, look for "magic numbers" (hardcoded numeric literals) and suggest replacing them with appropriate defined constants when those constants are meaningful in the context of the PR. For example, the hardcoded value 32 should be replaced with WLED_MAX_SEGNAME_LEN when it represents a segment name length limit. This improves code maintainability and reduces the risk of inconsistencies.
Learnt from: DedeHai
Repo: wled/WLED PR: 5372
File: wled00/FX.cpp:6489-6489
Timestamp: 2026-02-26T20:49:50.973Z
Learning: In WLED PR `#5372` (wled/WLED), mode_2Dscrollingtext in wled00/FX.cpp: the UI control backed by SEGMENT.custom2 is intentionally labeled “Font size”. It selects among predefined fonts whose pixel dimensions inherently define size; maintainers prefer to keep the label as “Font size” rather than “Font”.
Learnt from: softhack007
Repo: wled/WLED PR: 0
File: :0-0
Timestamp: 2025-11-14T13:37:30.955Z
Learning: In WLED code reviews, when code is modified or added, look for "magic numbers" (hardcoded numeric literals) and suggest replacing them with defined constants when meaningful constants exist in the codebase. For example, suggest replacing hardcoded "32" with WLED_MAX_SEGNAME_LEN if the context relates to segment name length limits.
Collaborator
Author
about 380 bytes, see initial comment |
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.
As discussed: adding two new icons and text under the buttons:
additional flash use: 380bytes.
I also added "how to" instructions for adding/changing icons in the future, the workflow is pretty straight forward but I had to figure it out first...
Summary by CodeRabbit
Documentation
New Features
Style
Bug Fix / Behavior