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

Cloud
1

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.

2 Likes
2

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?

3

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

4

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.

5

@wgbartley,

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?

6

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.

7

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

8

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
9

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

10

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

11

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

Iā€™m now on an Imac and it looks the same too ^^

12

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.

13

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

14

@jgoggins,

looks awesome!

15

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

16

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