[maxelkins]

🤖 Created with AI assistance
👨‍💻 Edited, reviewed and steered by @maxelkins

Summary

Highlight the line a Python error points to, create a visual connection between the error and the code.

Changes

• Add a CodeMirror extension that highlights one line and its line number
• Highlight the line from errorDetails when the error is in that .py file, clearing it on edit
• Add per-theme error-line colours using design-system reds, with a color-mix fallback
• Add unit tests for highlighting, clearing and moving the error line, and for the line and file Pyodide passes into errorDetails
• Add Cypress tests for the highlight in both runtimes and for the light and dark theme colours
• Keep the highlight cleared after an edit with a new errorLineDismissed flag in Redux
• Make the error bar on the line number right-to-left aware
• Added a logical properties fix to the gutter spacing, overriding code mirrors physical properties.

How this works

• We were already storing the line on which the error occurred in errorDetails
• EditorPanel reads the errorDetails, and if the errors file matches that tab, it sends the line number to the code mirror extension, which then adds the line decoration
• The gutter is highlighted using a gutter marker using the same line number so they always match.
• The extension also checks for edits to the code and clears the error when an edit is made. EditorPanel then sets errorLineDismissed in Redux so the highlight doesn't come back when the editor is rebuilt i.e. switching tabs.
• The extension applies custom properties which are then themed in our internal styles

Limitations

• If the error is not in the currently open file tab, the tab does not change, but the line is highlighted when you switch to that tab. This is intentional because I didn't want to make any bigger interaction changes.
• Screen readers don't announce the highlight, but the error message still gives the line number in text. Any changes here would need to be a separate accessibility consideration.

A11y

Screenshots

Right to left reading:

[maxelkins]

Out of scope here, but found while testing: with Skulpt, an unclosed bracket on the last line (e.g. import turtle then print("hi") is reported one line past the end of the file ("line 3" for a 2-line file). The highlight ignores out-of-range lines, so nothing is highlighted in that case. The wrong line number comes from Skulpt and affects the error message too, so it should be fixed as a separate issue rather than worked around here.

[zetter-rpf]

Do you think there's any way to reduce the number of browser based tests?

While it's helpful to have unit tests that are specific, because browser based tests take longer to run and maintain I wondered if all of them are worth the cost.

Seeing the error highlighted is just one part of a set of behaviour around error messages - maybe they could be combined with each other or existing tests related to errors without losing coverage?

[zetter-rpf]

I tried it out and it works great, what a great bonus feature for Friday!

Have a suggestion about tests, but I haven't looked at the existing error related tests so don't know how feasible it is.

[maxelkins]

Thanks @zetter-rpf Will take a look at the feedback 👍