Load/Save file in WebConsole Editor

[nchevobbe]

One of our main goal working on the Editor was sunsetting Scratchpad. The feedback so far suggest we're on the right track, but people are telling us they're missing one thing: the ability to save/load file to/from disk.

This is something that is possible in Scratchpad:

---

Once a file was opened, the file path was set as a title of the window, and hitting save would directly write to this file

---

I don't want to blindly copy what's in scratchpad, and I don't want to put emphasis on those buttons as I suspect they might only be used by a fraction of the editor mode.

Let's discuss what our options are :)

[nchevobbe]

cc @digitarald

[digitarald]

Just as an option to simplify this, v0 could be just save-as/open buttons that, by default, open the file dialog each time (which is basically called import/export in other devtools panels). Save-as-same-file has a long tail of additional constrains, like tracking edits, warning on losing changes.

Regarding v1 UX, we could show the shortened file name reference as label next to Save button.

[nchevobbe]

Scratchpad was removed, and we're about to add keyboard shortcut for save/load which is great. For the moment, the workflow will be very simple (we'll show the save dialog each time people do Ctrl+S).

We should think of a good way to add this in the UI. Here's a user story:

1. I pick a file from my disk and load it
2. I do some modification, run it against the current tab
3. In the process, I hit Ctrl+S multiple time, I shouldn't be asked where to save the file
4. Once I'm done, I save one last time, and I want the console to have a way to "stop" the file editing…
5. …because I'm starting to write a new script
6. That I eventually will save to disk (and enter the "file editing" mode)

---

Some of the element we'd need for that:

• an icon to import a file
• an icon to save a file
• a way to tell me which file is being edited, if there's one
• a way to stop the "file editing" mode

Some of the constraints I see in the current Editor Toolbar is the limited available space (we already have a Run, history navigation, reverse search and close buttons), which is why I was thinking about adding a bottom element (statusBar), like the one we have in the debugger when a source is open.

That would also make it possible to add a "prettify" button that we may have in the future.

Here's a quick and ugly prototype (that is missing the "stop file editing" feature):

[nchevobbe]

cc @digitarald @violasong @fvsch :)

[digitarald]

Just for completeness we also talked about this simplified User Flow before for a reduced feature set (aka Import/Save):

• User clicks Import icon to load a file
• Selects ~/Dcuments/script.js
• Edits the JS and executes it a few times
• Hits Ctrl-S to save the changes
• Gets prompted with a Save As file picker, maybe with script.js prefilled as a last-used file reference
• Continues editing or closing the console

Importing (vs opening) simplifies that the Console does not need a "new" vs "existing" file state, while adding only minor overhead to saving if we correctly keep the last reference. If we see a lot of people using this flow, we can build it out to the full-fletched flow described above.

[digitarald]

Lets wait here until we know how users save/load; or generally consistent import/save icons throughout DevTools.