Redesign "Ask after execution" output modal

[Taitava]

This is how the Ask after execution output modal currently looks like:

(The screennshot is from SC 0.11.1, although the modal looks the same also in 0.22.0.)

Embed a rich editor field

I'd like to embed a CodeMirror editor to the modal to replace the current simple <textarea> field. I think this could offer some benefits:

• Add syntax highlighting (if the output is of some recognised markup language or programming language).
• Add a preview mode. Currently, converted ANSI code shows up as raw HTML in the modal. The preview mode could also render other HTML originating from shell command output.
  • There could be a setting to decide if the modal should show up in preview mode or editing mode by default.
• Add a search box.

Switch the modal into a tab (added 2024-05-12)

• A setting that defines if Ask after execution should be a modal or a tab (aka leaf). I haven't decided if this should be a shell command level setting, or global (or both). Perhaps start with a global setting?
• The content will be the same regardless of the form, but the tab form will allow the content to be wider and taller.
• The setting will be a dropdown containing the following options:
  • Modal
  • Tab
  • Pane
  • Window
• An additional toggle could define if executing the same shell command again should reuse a previously opened tab/pane/window or always create a new one.

Other things

• Add two CSS classes to the modal:
  • SC-output-modal-w3ocyqvjxb: A shell command specific CSS class. Allows customizing a single shell command's output modal via CSS. The last part of the CSS class is a shell command's id, so it depends on the targeted shell command.
  • SC-output-modal: All ouput modals of any shell commands should receive this class. Allows adding CSS customizations that affect all output modals. (Edit 2024-05-11: I just noticed there's currently SC-modal-output CSS class, but its not documented. Anyway, I want to rename it to SC-output-modal to be in line with SC-prompt-modal).
  • These classes are named similarly to SC-prompt-modal and SC-prompt-modal-w3ocyqvjxb that are already available for Prompts.
• Add an Execute again button. This would execute the exactly same shell command again, without reopening a possible Prompt, nor reparsing {{variables}}. Suitable e.g. for quickly debugging a script execution after making external changes. (Added 2024-05-10).
• Add syntax highlighting to the shell command displayed at the top of the modal. (Added 2024-05-10).
• Replace the Redirect: word with something non-technical. Or maybe just remove it completely?

[OMSmolina]

The ideal would be to do similar to what the Terminal plugin does. I think they use xtrem.js, it shows the colors and everything necessary without having to do much.

Currently the modal does not support much text and ends up cutting it off, leaving a lot of text undisplayed. It also does not allow you to make it larger to show more text. It is not necessary to integrate a shell like terminal does, but at least the visualization of the executed commands could be done the same.

When the Ask after execution is executed, an instance-tab opens and you can decide in settings how you want it.

Options:

[Taitava]

Thank you for bringing up this idea! 🙂 Like you suggested, this would work better as a tab instead of a modal.

Your idea reminds me about a theoretical idea I've had for a while of linking the SC plugin with the Terminal plugin. This would require a public API from Terminal (I don't know if it has one). The rought idea is that a shell command could be configured to be run in Terminal, so all its output would appear there. I think that could suit your idea of a separate tab and shell command (+ output) visualized like in a terminal? 🙂 I have not planned this any further yet, and it's not a near future thing anyway.

I still see that the Ask after execution modal could be developed to the direction mentioned in my first post. I don't see these two ideas excluding each other. Both could have their use-cases. I'd use terminal for output that doesn't need editing, nor further transferring e.g. to a note, and CodeMirror for output (e.g. markdown or HTML) that needs manual edits and that I wan't to insert into a note. Also, the modal could transform into a tab, I think, to make more space and to persist it longer than a modal. It could be a setting.

[OMSmolina]

The problem I have right now is that with the current modal not all the information appears and it cannot be read well with all the colors without formatting. Ask after execution is the only viable option without having to open a new file and paste the information each time... Notification Ballon or Status Bar are not viable, they also do not show all the information nor can you scroll. I don't need to edit the output, having all the text appear well formatted to know that the commands have been executed correctly is really what I need.

It would be nice to integrate it with Terminal but something quick without much work would be to create a new tab option in the modal or a completely new option that is configured in the Output that does that function with Xtrem.js already well-formatted text so that you can at least read if the command has been executed correctly.

[Taitava]

I agree, there could be a less effort requiring solution to show the output (and shell command) on a tab, without the need for a Terminal integration at the beginning.

Will the rendering be powered by Xterm.js, I'll leave that decision to the implementation phase. Xterm might be good, but it would be yet another dependency and I'm trying to avoid adding more of them, if possible. I'll see what CodeMirror in a readonly mode will look like.

(Again, I can't promise this will happen anytime soon. I'm currently focusing more on the test suite to make it less time consuming (aka less painful) for me to test and publish new versions.)

For now: the modal can be enlargened

I don't know if you have already done this, but before the tab thing gets implemented, you can write a CSS snippet that grows the width and height of the current output modal.

• div.SC-modal-output targets the modal element.
• div.SC-modal-output textarea targets the actual output text field.
• (Edit: SC-modal-output will be renamed in some later version to SC-output-modal.)

I can write an example, if needed. Anyway, this is not an optimal solution, but at least something.