Close #2262: Add noVNC scale setting

Add a setting to choose the scale mode of the noVNC pop-up as well as
the embedded console in the content panel to "My Settings". Having both
set to local scaling was the most important use-case for the users. One
setting for both places is the simplest solution making this possible.

The new section (fieldset) makes adding further options such as
"Local Cursor" easy.

Co-developed-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Signed-off-by: Dominic Jäger <d.jaeger@proxmox.com>

www/manager6/Utils.js

@@ -960,13 +960,14 @@ Ext.define('PVE.Utils', { utilities: {
     },
 
     openVNCViewer: function(vmtype, vmid, nodename, vmname, cmd) {
+	var sp = Ext.state.Manager.getProvider();
 	var url = Ext.Object.toQueryString({
 	    console: vmtype, // kvm, lxc, upgrade or shell
 	    novnc: 1,
 	    vmid: vmid,
 	    vmname: vmname,
 	    node: nodename,
-	    resize: 'off',
+	    resize: sp.get('novnc-scaling'),
 	    cmd: cmd
 	});
 	var nw = window.open("?" + url, '_blank', "innerWidth=745,innerheight=427");

www/manager6/VNCConsole.js

@@ -41,12 +41,13 @@ Ext.define('PVE.noVncConsole', {
 	    items: box,
 	    listeners: {
 		activate: function() {
+		    var sp = Ext.state.Manager.getProvider();
 		    var queryDict = {
 			console: me.consoleType, // kvm, lxc, upgrade or shell
 			vmid: me.vmid,
 			node: me.nodename,
 			cmd: me.cmd,
-			resize: 'scale'
+			resize: sp.get('novnc-scaling'),
 		    };
 		    queryDict[type] = 1;
 		    PVE.Utils.cleanEmptyObjectKeys(queryDict);

www/manager6/window/Settings.js

@@ -37,6 +37,10 @@ Ext.define('PVE.window.Settings', {
 
 	    var username = sp.get('login-username') || Proxmox.Utils.noneText;
 	    me.lookupReference('savedUserName').setValue(username);
+	    var vncMode = sp.get('novnc-scaling');
+	    if (vncMode !== undefined) {
+		me.lookupReference('noVNCScalingGroup').setValue(vncMode);
+	    }
 
 	    var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
 	    settings.forEach(function(setting) {
@@ -246,13 +250,23 @@ Ext.define('PVE.window.Settings', {
 		text: gettext('Reset Layout'),
 		width: 'auto',
 		name: 'reset'
-		}
+	    },
 	]
     },{
-	xtype: 'fieldset',
-	itemId: 'xtermjs',
+	xtype: 'container',
+	layout: 'vbox',
 	width: '50%',
 	margin: '5',
+	defaults: {
+	    width: '100%',
+	    // right margin ensures that the right border of the fieldsets
+	    // is shown
+	    margin: '0 2 10 0'
+	},
+	items:[
+	    {
+		xtype: 'fieldset',
+		itemId: 'xtermjs',
 		title: gettext('xterm.js Settings'),
 		items: [{
 		    xtype: 'form',
@@ -264,7 +278,7 @@ Ext.define('PVE.window.Settings', {
 		    },
 		    defaults: {
 			width: '100%',
-		margin: '0 0 10 0'
+			margin: '0 0 10 0',
 		    },
 		    items: [
 			{
@@ -320,6 +334,46 @@ Ext.define('PVE.window.Settings', {
 			}
 		    ]
 		}]
+	    },{
+		xtype: 'fieldset',
+		title: gettext('noVNC Settings'),
+		items: [
+		    {
+			xtype: 'displayfield',
+			fieldLabel: gettext('Scaling mode'),
+		    },
+		    {
+			xtype: 'radiogroup',
+			reference: 'noVNCScalingGroup',
+			height: '15px', // renders faster with value assigned
+			layout: {
+			    type: 'hbox',
+			},
+			items: [
+			    {
+				xtype: 'radiofield',
+				name: 'noVNCScalingField',
+				inputValue: 'scale',
+				boxLabel: 'Local Scaling',
+				checked: true,
+			    },{
+				xtype: 'radiofield',
+				name: 'noVNCScalingField',
+				inputValue: 'off',
+				boxLabel: 'Off',
+				margin: '0 0 0 10',
+			    }
+			],
+			listeners: {
+			    change: function(el, newValue, undefined) {
+				var sp = Ext.state.Manager.getProvider();
+				sp.set('novnc-scaling', newValue);
+			    }
+			},
+		    },
+		]
+	    },
+	]
     }],
 
     onShow: function() {