New toolbar for execution of commands and access to preview

[vparfonov]

See the toolbar integrated in the IDE in the following mockup:

There are multiple states which needs to be handled:

No action/commands in progress

Command is started

General view

Details

Click on the command

Clicking on the command, will show the console output associated for the command in Console panel.

Hover on command

We display the whole command in the hover and adapt the width properly so it displays nicely with word-wrappind

Preview

When the user clicks on "Preview" it displays a small dropdown with all the previews for all currently running commands (started by the user, not the ones from the agents).

They are ordered by the last one added into the list.
Example:

• the user call a command1 with PreviewURL1
• then the user call a command2 with PreviewURL2
  User will see:
• PreviewURL2
• PreviewURL1

When the user clicks on a previewURL, the URL is opened on a separated browser's tab.

If the command that is providing a previewURL is stopped, then the previewURL gets removed from the list displayed in the dropdown.

Note: Later user should be able to pin a preview url, to default the one opened with a single click on "Preview".

User can click on it to open the preview in another browser’s tab.

Command Finished

The button allows to relaunch the command.

Expanded activity monitor (Phase 2)

Commands displayed in the list:

• the list is displaying all commands executed accross all machines
• a maximum of 7 commands is shown in the dropdown, but the dropdown can be scrolled

The commands displayed are sync with the commands displayed in the Console panel

• if a command is removed from the command panel, then it is cleared from the Activity Monitor

There is no icon showing that a command is running.

• This information is visible for the user, by seeing the duration updated each seconds

Multiple commands can be running at the same time.

• When a new command is invoked, it takes precedence and replace the previous one executed in the header.

If user selects a command in the list, it displays it in the header and show the corresponding command outputs in the Console Panel.

Run and Debug buttons

By default, we display buttons for “Run” and “Debug”. The buttons when clicked, it displays the whole commands list of the goal and when a command is hovered, it allows to select the target where to execute the command.

Nice to have:
User must have the ability to define default command for a goal.
I’d like the user being able to configure a button per goal in the toolbar if he wants it. This should be in the Preferences, but by default, we would display “Run” and “Build” buttons in the toolbar.
We would have two actions on these buttons:

• single-click: it executes the default command of the goal
• long-click: it will display the whole commands list of the goal in a dropdown as we have today.

Linked to: #2681

[vparfonov]

We have goals. They need to be used for simplifying the user experience.
By default, we will show button for “Run” and “Debug”, but I’d like the user being able to configure a button per goal in the toolbar if he wants it. This should be in the Preferences, but by default, we would display “Run” and “Build” buttons in the toolbar.
We would have two actions on these buttons:

• single-click: it executes the default command of the goal
• long-click: it will display the whole commands list of the goal in a dropdown as we have today.
  User must have the ability to define default command for a goal.

[slemeur]

Updated specification

[slemeur]

@vparfonov + @azatsarynnyy : I have updated the requirements.

Base on the discussion we had with @azatsarynnyy this morning, we will move forward without implementing the "dropdown menu" when clicking on the controller. This gives you the ability to continue your work without being block on this part of the component.
In parallel, we can continue to discuss the specification and adjust it depending on technical challenges.

Thanks