Miscellaneous parameter improvements

[gwhitney]

By submitting this PR, I am indicating to the Numberscope maintainers that I have read and understood the contributing guidelines and that this PR follows those guidelines to the best of my knowledge. I have also read the pull request checklist and followed the instructions therein.

---

This PR makes the following moderate improvements to the ParamEditor interface:

1. Uses textareas instead of text inputs for FORMULA params; they are initially sized to exactly match the former text inputs, but are resizable for longer formulas.
2. Increases the height of the textarea whenever you hit the enter key (formulas may contain newlines, which are ignored if they occur in a place where the portion of the formula before the newline does not parse on its own as an expression).
3. Correctly displays disallowed free variables when they occur in a formula,
4. Removes some excess whitespace surrounding COLOR and BOOLEAN params

In addition, there was a bug in the handling of command-line arguments to the test: npm scripts such that all but the first were ignored. Now they are all respected, so that you can write, for example, npm run test:e2e -- --update-snapshots idiot if you know that the only changed snapshots were in the idiot test, so that it won't have to run all of the other tests just to get snapshots of those (and won't run the risk of accidentally updating a snapshot with an erroneous one if there happens to be a network error during one of the other tests, for example).

[gwhitney]

Not quite as simple as we estimated, but here it is. There is one thing about it on my mind though: really the drag handles is the only indication that the FORMULA entry boxes are different (and can be resized). But they are pretty subtle, though. Is it clear enough? Should we make some other styling difference for formulas, like a full box instead of an underline? Or should we make the drag handles more prominent? Unfortunately, there is no cross-browser way to CSS-style the drag handles, but you can overwrite them with your own graphic, although it's a little involved.

[gwhitney]

Oh, probably the CI tests are going to fail. Presuming so, I will update the CI snapshots in the morning.

[katestange]

But they are pretty subtle, though. Is it clear enough?

I think it is clear enough visually! Everything is kinda small on the panes, it is of an appropriate relative size I think.

[katestange]

I am having some less than ideal behaviour in some browsers though. Edge is well behaved. Below are screenshots from Firefox (first, annoying) and Chrome (second, not perfect). In particular, in Firefox when I expand the box, the width of the underbar with drag handle (and box) becomes slightly wider for some reason. And Firefox has these (always annoying) disappearing scrollbars, so that when you mouse over the drag handle, the scroll bar appears and you can't click the drag handle! So I cannot make the box smaller again. On Chrome something similar happens but there's still room to get the drag bar, albeit finickily. One thing that would help this might be to make the entire underbar drag the text space, but I don't know if that's an easy option or part of the inbuilt thing. But if we can stop the space getting wider and bleeding to the right into the scrollbar, that would be ideal.

[gwhitney]

Working on the resizing issue. But on a different point, did you switch the Wait For It featured specimen to formula mode just to get the two-tone color scheme with transparency? If so, should I just turn on transparency color picking for all color parameters and switch Wait For It back to List mode? I think it's much easier/clearer to see what is going on in list mode.

Thanks for letting me know.

[gwhitney]

Thanks for letting me know.

You can still let me know, but actually I went ahead and did it, it was so easy. If you think it was not a good idea, I can back it out. Other than that point, this PR should be ready for final review.

[katestange]

Awesome!