Feature: Basic Firefox compatibility

[VitroidFPV]

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

• https://addons.mozilla.org/en-US/firefox/addon/webserial-for-firefox/
• https://github.com/kuba2k2/firefox-webserial

TLDR of the main changes made:

• Change compatibility checks to include Firefox, yet still throw an error if WebSerial isn't available through the extension
• Firefox doesn't support navigator.connection, that metering data has been patched out if FF is used
• The polyfill extension seemingly has stricter data communication requirements, using ArrayBuffer helps everything go through

What does (not) work:

• [x] Port selection
• [x] Connection
• [x] CLI Communication (both ways)
• [x] MSP Communication (both ways)
• [x] Save to EEPROM
• [x] Save add Reboot (saves, but it doesn't like the MCU rebooting, that may have to be cleaned up)
• [ ] Connection to DFU device
• [ ] Flashing
• [ ] Bluetooth
• [ ] PWA (though there seems to be an extension for this too - but I haven't tried it)

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

• New Features
  • Added explicit support for Firefox browsers with the WebSerial extension, expanding browser compatibility.
• Bug Fixes
  • Improved accuracy in network status reporting by displaying "NA" for certain network properties when using Firefox.
  • Standardized data handling and byte counting in serial communication, ensuring more consistent and correct reporting.
• Chores
  • Enhanced browser detection and user feedback to better inform users about compatibility and requirements.

[coderabbitai[bot]]

Walkthrough

The 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

File(s)	Change Summary
src/js/protocols/WebSerial.js	Refactored batchWrite and send methods to standardize buffer handling, ensure correct chunking, and accurately track bytes sent.
src/js/tabs/setup.js	Added Firefox detection for network status display; updated UI logic to show "NA" for certain network properties in Firefox; improved anchor tag formatting.
src/js/utils/checkBrowserCompatibility.js	Added isFirefoxBrowser() function; enhanced isChromiumBrowser() for better detection; updated checkBrowserCompatibility() to support Firefox with WebSerial extension and improved error messaging.

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, Windsurf

CodeRabbit 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. Learn more here.

---

[!NOTE]

⚡️ Faster reviews with caching

CodeRabbit 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 Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings. Enjoy the performance boost—your workflow just got faster.

---

📜 Recent 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

📥 Commits

Reviewing files that changed from the base of the PR and between 22912de872174ac1d6be641ba73c4bed8bc59a2b and bbf4a01723205d477e25b21d7e65f20e29fe2a2e.

📒 Files selected for processing (1)

• src/js/utils/checkBrowserCompatibility.js (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/js/utils/checkBrowserCompatibility.js

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: deploy

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions[bot]]

Preview URL: https://bbf4a017.betaflight-configurator.pages.dev

[DavidAnson]

@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?

[VitroidFPV]

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

[nerdCopter]

please mark draft; do not merge as-is.

first time i i was able to connect, but save did not work. now i cannot get it to connect properly. -- either a bunch of CRC errors, or falsely reports firmware not supported.

using the preview URL on Debian 12 / Firefox-ESR

• tried both ./firefox-webserial-linux-x86-64 and the .json / executable in ~/.mozilla/native-messaging-hosts/.

[VitroidFPV]

I got Linux installed on my laptop now, going to investigate

[haslinghuis]

Don't think we should support third party extensions as it adds extra maintenance / support. Using chrome based browser for development on Linux while using firefox with other tasks. It already was reported when switching tabs the browser goes into sleep mode. Instead we need focus on desktop / android support and then mDNS working again.