Add native resolution to displays

app/styles/base.css

@@ -1281,13 +1281,16 @@ a:visited {
   display: flex;
   justify-content: space-between;
 }
-#noVNC_displays .arrange-buttons button {
+#noVNC_displays .arrange-buttons button, #noVNC_displays .arrange-buttons .button {
   border: none;
   display: flex;
   align-items: center;
   padding: 4px 7px;
   border-radius: 5px;
   cursor: pointer;
+  background-color: #f1f1f1;
+  font-size: 13px;
+  border: 1px solid #e5e5e5;
 }
 #noVNC_refreshMonitors {
   position: absolute;
@@ -1299,8 +1302,9 @@ a:visited {
   transform-origin: center;
 }
 #noVNC_addMonitor {
-  background-color: #2196F3;
+  background-color: #2196F3!important;
   color: white;
+  border: none!important;
 }
 #noVNC_addMonitor svg {
   margin-right: 5px;

app/ui.js

@@ -1912,6 +1912,7 @@ const UI = {
             m.x += startLeft
             m.y += startTop
         }
+        UI.setScreenPlan()
     },
 
     removeSpaces() {
@@ -2002,6 +2003,30 @@ const UI = {
         return { top, left, width, height, startLeft, startTop }
     },
 
+    setScreenPlan() {
+        let monitors = UI.monitors
+        const { scale } = UI.multiMonitorSettings()
+        const { top, left, width, height } = UI.getSizes(monitors)
+        const screens = []
+        for (var i = 0; i < monitors.length; i++) {
+            var a = monitors[i];
+            screens.push({
+                screenID: a.id,
+                serverHeight: Math.floor(a.h * scale),
+                serverWidth: Math.floor(a.w * scale),
+                x: Math.floor((a.x - left) * scale),
+                y: Math.floor((a.y - top) * scale)
+            })
+        }
+        const screenPlan = {
+            serverHeight: Math.floor(height * scale),
+            serverWidth: Math.floor(width * scale),
+            screens
+        }
+        UI.rfb.applyScreenPlan(screenPlan);
+    },
+
+
 
     displayMonitors() {
         const { canvas, ctx, bb, canvasWidth, canvasHeight, scale } = UI.multiMonitorSettings()
@@ -2053,7 +2078,6 @@ const UI = {
                 monitors[i].isDragging = false;
             }
             UI.recenter()
-            const screenplan = setScreenPlan()
             UI.draw()
         }
         function myMove(e) {
@@ -2096,29 +2120,6 @@ const UI = {
             }
         }
 
-
-        function setScreenPlan() {
-            let monitors = UI.monitors
-            const { top, left, width, height } = UI.getSizes(monitors)
-            const screens = []
-            for (var i = 0; i < monitors.length; i++) {
-                var a = monitors[i];
-                screens.push({
-                    screenID: a.id,
-                    serverHeight: Math.floor(a.h * scale),
-                    serverWidth: Math.floor(a.w * scale),
-                    x: Math.floor((a.x - left) * scale),
-                    y: Math.floor((a.y - top) * scale)
-                })
-            }
-            const screenPlan = {
-                serverHeight: Math.floor(height * scale),
-                serverWidth: Math.floor(width * scale),
-                screens
-            }
-            UI.rfb.applyScreenPlan(screenPlan);
-        }
-
     },
 
 

vnc.html

@@ -299,12 +299,6 @@
                                         <span class="slider-label">Toggle Control Panel via Keystrokes</span>
                                     </label>
                                 </li>
-                                <li>
-                                    <label class="switch"><input id="noVNC_setting_enable_hidpi" type="checkbox" />
-                                        <span class="slider round"></span>
-                                        <span class="slider-label">Render Native Resolution</span>
-                                    </label>
-                                </li>
                                 <li class="noVNC_hidden">
                                     <label for="noVNC_setting_idle_disconnect">Idle Timeout:</label>
                                     <select id="noVNC_setting_idle_disconnect" name="vncIdleDisconnect">
@@ -554,10 +548,16 @@
             <div id="noVNC_refreshMonitors"><svg id="noVNC_refreshMonitors_icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path class="fa-primary" d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5z"/><path class="fa-secondary" d="M80 396.9V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V320c0-17.7 14.3-32 32-32H176c17.7 0 32 14.3 32 32s-14.3 32-32 32H125.6l17.2 17.1c62.5 62.5 163.8 62.5 226.3 0c17.5-17.5 30.1-38 37.8-59.8c5.9-16.7 24.2-25.4 40.8-19.5s25.4 24.2 19.5 40.8c-10.8 30.6-28.4 59.3-52.9 83.8c-87.5 87.5-229.3 87.5-316.7 0L80 396.9z"/></svg></div>
             <canvas id="noVNC_multiMonitorWidget" class="" width="560" height="230"></canvas>
             <div class="arrange-buttons">
-              <button id="noVNC_addMonitor">
+            <div style="gap: 10px;" class="flex">
-                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M240 64c0-8.8-7.2-16-16-16s-16 7.2-16 16V240H32c-8.8 0-16 7.2-16 16s7.2 16 16 16H208V448c0 8.8 7.2 16 16 16s16-7.2 16-16V272H416c8.8 0 16-7.2 16-16s-7.2-16-16-16H240V64z"/></svg>
+                <button id="noVNC_addMonitor">
-                Add Monitor
+                    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M240 64c0-8.8-7.2-16-16-16s-16 7.2-16 16V240H32c-8.8 0-16 7.2-16 16s7.2 16 16 16H208V448c0 8.8 7.2 16 16 16s16-7.2 16-16V272H416c8.8 0 16-7.2 16-16s-7.2-16-16-16H240V64z"/></svg>
-            </button>
+                    Add Monitor
+                </button>
+                <label class="button">
+                    <input style="margin-right: 10px;" id="noVNC_setting_enable_hidpi" type="checkbox" />
+                    Native Resolution
+                </label>
+            </div>
               <button id="noVNC_close_displays">Done</button>
             </div>
           </div>