feat: can dock the monitor widget to the "right"

[dankeboy36]

Motivation

This is a quality of life improvement until the Serial Monitor widget is not detachable from the IDE2 window: arduino/arduino-ide#289. This is the simplest solution to use larger screens more efficiently. One can keep the widget at the "bottom", or move it to the "right".

monitor.DockArea.mp4

Change description

Added a new preference (arduino.monitor.dockPanel) to specify the area of the application shell where the Serial Monitor widget resides. The possible values are "bottom" and "right". The default value is "bottom".

The dock area is per application and not per workspace or window. However, advanced users can create the ./.vscode/settings.json and configure it per sketch preference.

Other information

Related: #2075 (comment)

Reviewer checklist

• PR addresses a single concern.
• The PR has no duplicates (please search among the Pull Requests before creating one)
• PR title and description are properly filled.
• Docs have been added / updated (for bug fixes / features)

[kittaakos]

monitor.widgetDockArea?

[per1234]

I'm wondering about the term "area". I have struggled to understand the correct terminology to use when referring to Arduino IDE UI components.

Here we have the terms "Side Bar" for the UI containers on the left and right side of the window and and "Panel" for the container at the bottom:

• https://code.visualstudio.com/docs/getstarted/userinterface
• https://code.visualstudio.com/api/ux-guidelines/overview

Here we have the terms "area" and "panel" used for all three containers (but evidently not for the "main area"?):

https://www.typefox.io/blog/flexible-window-layout-in-theia-ide

I don't like how VS code uses a different term for a container depending on its location. I think it is more intuitive (especially in the context of Theia's "flexible window layout") to use the same term for all containers. I find "area" to be overly ambiguous, so I have been using the term "panel":

• "main panel"
• "bottom panel"
• "left panel"
• "right panel"

[per1234]

I've thought about it more and I think that in general it is best to use the terminology established by VS Code since this is by far a more significant precedent and more likely to already be familiar to the users than the alternate terminology established (inconsistently) in an obscure blog post.

However, it is not possible to follow the VS Code terminology exactly in this case because here we need a single term that can apply to both the "Panel" and the "Secondary Sidebar". Obviously the term "sidebar" can't be used for that purpose, so we are left with "panel".

So I suggest renaming the setting ID arduino.monitor.dockPanel. This will cause the setting name shown in the GUI advanced settings interface to be "Arduino > Monitor: Dock Panel" instead of the current "Arduino > Monitor: Dock Area"

The existing "bottom" and "right" setting values will work fine in that context. I think the setting description is OK as it is now.

[per1234]

@dankeboy36 is the PR ready for another review round?

[dankeboy36]

PR ready for another review round?

Yes. Please take another look at the changes. The new preference key is now arduino.monitor.dockPanel. I have updated the PR description too. Thank you!

[per1234]

Suggested change

	'arduino.monitor.dockArea': {
	'arduino.monitor.dockPanel': {

[dankeboy36]

Excellent catch. The compiler should find such errors, so I added a tiny TypeScript trick to let the compiler error when there is a typo next time.

[per1234]

Thanks @dankeboy36!