Sparkulator Feature Request: Minimize compile error output button [Done]

Despite best programming efforts, JavaScript can still be a fickle witch. When a user (me!) compiles code in the Sparkulator, and the build fails, the footer expands and shows the error output. However, many (most?) times when I give focus back to code editing, the footer does not collapse automagically and stays on top of code. No matter how far or hard I try to scroll down, I can never see the code under that footer. The only fix seems to switch to another project and back again or refresh the browser. Another work-around is to add a lot of empty lines to the end of the files I’m working on so that it increases the scroll height.

It would be nice if there was a little down arrow icon on the expanded footer that allows a user to minimize the output in case the JavaScript fails to catch the focus or key press events in the code portion.


Hey @shime , I’m not sure if you’ve seen this. I’m wondering how difficult this would be to address (and hoping it could a be simple CSS/JS fix). @wgbartley , which browsers are you seeing this in?

So far, it’s been Chrome on Mac and Windows. I haven’t tried any other browsers, but I will!

Hey @wgbartley , I couldn’t replicate on Chrome for OS X. I wonder if there could be a browser caching issue or something…does it happen if you open an incognito tab and re-login?

Something like this is a good idea. The debugger area of the Web IDE will be expanding it’s capabilities to show build stats (like size) and other things; I’ll certainly keep this suggestion in mind when we put those specifications together.


One way I always use is to press the ‘save’ button and the error output minimizes. :slight_smile:

I’m on Chrome windows.

Give it a try?

I’ve found the error box won’t close unless I’m in the main sketch tab. If I’m in one of the additional .cpp or .h files, the error dialog box stays open, but as soon as I click to the main .ino file and click on a line, the error box closes.

I’m on Safari for Mac but can replicate it in Chrome as well.

@timb thanks for reporting more details! fix will be live soon.

@wgbartley thanks for a great suggestion about the collapse button! can you confirm that you’re also seeing this behavior on tab pages only?

Hey @wgbartley, just deployed a tweak to the IDE in production to do exactly this. You might have to do a hard refresh of the page to see it. The minimize compile error output button is on the far right of the debugger area. Thanks for the suggestion!

1 Like

@jgoggins, just took a quick look here and it might be great if the arrow can be shifted slightly to the left for better visibility and not blocked by the scroll bar :smile:

Hey @kennethlimcp , word. It doesn’t look that way on Mac Chrome, what browser are you using? Thanks for bringing that up.

Windows 7 chrome. 15" lcd for my laptop :slight_smile:

I’m now on an Imac and it looks the same too ^^

Looks great on my MacBook Pro. However, I can imagine some random browser updates could break it (Chrome is pretty bad about it, honestly) like he’s experiencing. A 5-10 pixel bump to the left couldn’t hurt.

Just pushed a tiny CSS update that should fix this:

.close-error-details {
  +    margin-right: 10px;
  float: right;

@kennethlimcp let me know if you’re still seeing this (after a hard refresh).


looks awesome!

Another, smaller suggestion… If there are compile errors, the error triangle shows next to the “Ready.” text. Would it be possible to add a .console span.error-details-icon { cursor: pointer; } to the CSS to make the mouse cursor change when you hover over it since it is a clickable icon?

/ping @jgoggins

Cool idea, simple enough, thanks for sharing precise CSS example, added to task list! :smile: