Feature: Basic Firefox compatibility #4479
Conversation
WalkthroughThe changes update browser compatibility logic to explicitly support Firefox (with WebSerial extension) in addition to Chromium browsers. Data handling in the WebSerial protocol is standardized for buffer consistency and accurate byte tracking. UI logic is updated to display network status appropriately for Firefox, and new utility functions are added for browser detection. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI (setup.js)
participant Browser
participant Compatibility Utils
User->>UI (setup.js): Open Setup Tab
UI (setup.js)->>Compatibility Utils: isFirefoxBrowser()
Compatibility Utils-->>UI (setup.js): true/false
UI (setup.js)->>Browser: Access network properties
alt Firefox detected
UI (setup.js)-->>User: Show network status with "NA" values
else Not Firefox
UI (setup.js)-->>User: Show actual network status values
end
sequenceDiagram
participant App
participant WebSerial
participant Device
App->>WebSerial: send(data, callback)
WebSerial->>WebSerial: Normalize data to ArrayBuffer
alt Use batch write
WebSerial->>WebSerial: batchWrite(data)
loop For each 63-byte chunk
WebSerial->>Device: write(chunk)
end
WebSerial->>Device: write(remaining bytes)
else Direct write
WebSerial->>Device: write(Uint8Array view)
end
WebSerial->>App: callback(bytesSent)
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
Documentation and Community
|
![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)
src/js/utils/checkBrowserCompatibility.js (1)
103-105: Updated error message for browser compatibility.The error message now correctly informs users about Firefox compatibility with the WebSerial extension, including a helpful link to the extension.
One minor suggestion: consider using a non-localized URL for the Firefox extension rather than the Czech-specific URL (
/cs/). Something likehttps://addons.mozilla.org/firefox/addon/webserial-for-firefox/would be more universal.- "Betaflight app requires a Chromium based browser (Chrome, Chromium, Edge),<br> or Firefox based browser running the <a href='https://addons.mozilla.org/cs/firefox/addon/webserial-for-firefox/'>WebSerial extension</a>.<br/>"; + "Betaflight app requires a Chromium based browser (Chrome, Chromium, Edge),<br> or Firefox based browser running the <a href='https://addons.mozilla.org/firefox/addon/webserial-for-firefox/'>WebSerial extension</a>.<br/>";
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
📒 Files selected for processing (3)
src/js/protocols/WebSerial.js(2 hunks)src/js/tabs/setup.js(5 hunks)src/js/utils/checkBrowserCompatibility.js(3 hunks)
🔇 Additional comments (9)
src/js/tabs/setup.js (3)
17-17: Good addition for Firefox compatibility.The import of
isFirefoxBrowserfunction is appropriate for detecting Firefox browsers and handling browser-specific differences.
499-506: Well-implemented Firefox browser detection.This code correctly identifies Firefox browsers and provides fallback values for network properties that aren't available in Firefox. Since Firefox doesn't support the
navigator.connectionAPI, this prevents potential errors when attempting to access these properties.
517-519: Network info display handles Firefox compatibility correctly.The code now safely displays network information regardless of browser type, with Firefox showing "NA" values for unsupported metrics.
src/js/protocols/WebSerial.js (2)
337-355: Improved batch writing with better buffer handling.The rewritten
batchWritemethod now correctly handles data as a Uint8Array with offset-based iteration. This approach is more robust than the previous implementation, ensuring consistent behavior across different types of input data.Key improvements:
- Type checking and conversion to Uint8Array
- Clean offset-based iteration
- Proper handling of remaining data
368-379: Enhanced data normalization for consistent handling.This change ensures all data is properly normalized to an ArrayBuffer format before sending, which is critical for:
- Consistent byte counting
- Compatible data handling for the Firefox WebSerial polyfill
- Accurate reporting of bytes sent
The normalization process correctly handles different input types and provides a standard interface for the WebSerial API.
src/js/utils/checkBrowserCompatibility.js (4)
30-41: Improved Chromium browser detection.The updated
isChromiumBrowserfunction now properly uses the modernnavigator.userAgentDataAPI with a fallback to the traditional user agent check. This approach is more reliable and future-proof.
43-51: Well-implemented Firefox browser detection.The new
isFirefoxBrowserfunction correctly detects Firefox browsers using both modern and traditional approaches. This is essential for the Firefox compatibility improvements in this PR.
79-82: Correctly expanded browser compatibility checks.Including Firefox alongside Chromium browsers in the compatibility checks is exactly what's needed to support the WebSerial polyfill extension for Firefox.
87-90: Added logging for Firefox and web APIs.These new console logs provide valuable debugging information for understanding browser capabilities, particularly useful during development and troubleshooting.
|
|
Preview URL: https://bbf4a017.betaflight-configurator.pages.dev |
|
@VitroidFPV, I love to see this, thank you! Do you happen to know if any of this makes Safari support easier? I know they don’t support WebUSB, either, but I’d love to be able to run Configurator there just to mess around. I’ve thought about trying in the debugger and seeing what breaks, but perhaps you know more as a result of this work? |
|
The polyfill extension is doing most of the work here. If Safari has something similar available then it may be possible to use as well in a similar manner, but if the browser doesn't natively support it then it's practically impossible to get working without things like this |
|
please mark draft; do not merge as-is. first time i i was able to connect, but save did not work. using the preview URL on Debian 12 / Firefox-ESR
|
Intro:
Using an extension (and native local bridge) available for Firefox that practically acts as a WebSerial polyfill, it is possible to connect and perform basic functionality even if Firefox doesn't support WebSerial on its own
TLDR of the main changes made:
navigator.connection, that metering data has been patched out if FF is usedArrayBufferhelps everything go throughWhat does (not) work:
Closing:
If Firefox does change stance on the WebUSB/WebSerial/WebBluetooth APIs in their current or slightly changed forms, this should work too. Otherwise the polyfill achieves basic functionality for those who use Firefox-based browsers and want to use them for setup/development.
I'm not sure if DFU over regular serial is a worthwhile effort, I don't know all the requirements for it, and haven't messed with anything in those parts.
Summary by CodeRabbit