Make it possible to hide the Vaadin development mode dialog without disabling it

[mstahv]

Currently the development mode dialog is only used for live reload. At least one user would like to use the live-reload itself, but disable the visualisation. So we'd need some way to hide the dialog and a way to make it visible again. It can be hidden with CSS and UI for it could be created easily, but how to make it possible to make it visible again🤔 An API one can use via browser development console?

[joheriks]

As a workaround to hide it permanently while keeping the live reload functionality, add the following snippet to your gobal style rules:

vaadin-devmode-gizmo {
  visibility: hidden;
}

[joheriks]

Noting that the current configuration parameter devmode.liveReload.enabled does not fit this purpose: it does at the moment actually hide the dialog, but its primary purpose is to enable/disable live reload functionality (hiding only because currently the dialog is only about that). So if/when the mode dialog acquires other features (not related to live reload) in the future, even setting this parameter to false may no longer have the effect of hiding the dialog.

So dialog visibility is an orthogonal requirement. Sketch of a possible design:

• The dialog is currently available in the browser as window.Vaadin.Flow.devModeGizmo (this is not public API so name can be changed). Publish method setAttached(boolean) which attaches/detaches the dialog from the DOM. (This would be the way to get it back if hidden by default).
• Add a server-side configuration parameter devmode.attachDialog (default true) for whether the dialog should be visible by default. This setting would only affect default state, state can be toggled using the above function at any time.
• Add a button in the dialog for hiding it, which when clicked also shows a (permanently dismissable) notification/link to docs how to re-enable the dialog by calling setAttached.
• When the dialog is not attached, log all notifications that are normally shown on screen in the browser console instead. In this way the user is not left in the dark if errors occur. So conceptually, the dialog would have two interaction modes: graphical and console.

Hiding the dialog, rather than live reload per se, is primarily what #8255 is about as well. Attaching / detaching the dialog from DOM rules out issues with selectors.

[javier-godoy]

Just noting that in newer versions of the framework, the style for hiding the dev tools is vaadin-dev-tools {display:none}