Improve UI for save as, rename, and import dialogs.

[asolove]

This PR improves UI styling, a11y, visual hierarchy, and some micro text for three of the CPO modal dialogs.

(After starting work on other modals, they require enough thinking that they need to be in separate PRs.)

Scope

Global dialog improvements

• [x] Dialogs can customize the text on the close button, default to "Cancel" (#350)
• [x] Focus the first focusable element after shown.
• [x] Allow dialogs to opt into narrower style.

Individual dialogs

• [x] Save As / Rename

  • [x] Change submit button text to "Save"
  • [x] Narrower, clearer spacing
  • [ ] Suggest better/funnier name for unnamed files? Change "Untitled" suggestion to "avast.arr"?

• [x] Import image

  • [x] Clarify styling of the three separate options in the table
  • [x] Make code samples smarter, adjusting to number of files selected
  • [x] Find a better name for import image style picker. "Import type" could be mistaken for a PL "type". Need to convey "how do you want these images to be imported?"
  • [ ] Make more of each row clickable to select the radio button

Preview

Save As / Rename

Production:

With this PR:

Import image

Production: (Code samples show like this, even when only 1 or 2 files selected.)

With this PR: Code samples change depending on number of files selected.

• e.g. with one file:
• with three files:

[jpolitz]

I like all the changes above!

I don't have data on this, but I would bet a small amount that the number people who have used the [list: ...] option in that import dialog is in the single digits. The first two are by far the most common. I suspect we could eliminate that option to simplify things.

Edited to add – and anyone who is sophisticated enough to want the list option doesn't really need it.

[sorawee]

The list with one element option also looks kinda useless.

[shriram]

Wow. Who knew this could be this nice.

[asolove]

I was going to ask about usage of the import options and any feedback folks had heard.

I agree the single file case looks a bit odd right now, but here's the weird chain of thinking that led me there:

• From one standpoint, we could just skip this whole step and always import as values. Students might benefit from choosing a meaningful variable name, as leaving around img1 seems like an avoidable antipattern. This would certainly make things faster/simpler.
• But given the editor's lack of multi-cursor or regex support (which is understandable for this audience!), if you really did want to import a list of 50 images, it would be painful to import them on separate lines and have to go back to add commas and indentation manually. So the list option is useful.
• The first several time I used the modal, I didn't really internalize that I could import multiple images at the same time. I only noticed this on the nth try, after stopping to think about why anyone would ever choose the "list" option. If we removed the list option when one file was selected, you might never discover that you could select multiple, and that would be sad. (There may also be a strong argument for completeness here: to help students navigate the classic set-theory dilemma about distinguishing an item from the set/list which contains just that item.)

All of this thinking in circles led me to offering all options all the time, though some of them are more sensible than others. Moving further in this direction, we might also consider inserting single image values at the current cursor location rather than a new line, if you want to specifically import the file inside an existing expression.

But I could see an equally-strong argument for just removing this step and always using values and letting users figure out variable names or additional structure themselves.

[asolove]

Note: after starting to think about the tricky bits of the publish dialog, I'm going to cut scope of this one to just the current set (save as, rename, and insert image) and start the publish work in another issue.

[shriram]

Just a comment that this is a good argument for leaving the list import option. I also think it has the benefit of inspiring ideas — e.g., you realize you can list-import, so you create a bunch of images to import that way (for instance, to make a zoetrope). TBH, I had forgotten/not realized you can do a list import until I saw the GUI proposal…

[jpolitz]

Fair enough @shriram . I guess list is handy if you navigate to a directory, cmd/shift select a bunch. Doing values and inserting the [list: ..., ..., ...] would be annoying because of all the commas. Probably really magical for those <10 people :-)

[asolove]

Hey all! The perfect is the enemy of the good, and I think this branch is now a clear enough improvement over the current state that I'd like to get it into Horizon.

Let me know if y'all have any objections or suggestions.

[jpolitz]

I'm going to merge and so we can poke at it on horizon and give any feedback after. This is a pretty clear improvement, thanks!