Show native resolution option

Remove display when deleted

app/styles/base.css

@@ -1291,6 +1291,13 @@ a:visited {
   background-color: #f1f1f1;
   font-size: 13px;
   border: 1px solid #e5e5e5;
+  line-height: 1;
+}
+#noVNC_setting_enable_hidpi_option {
+  display: none!important;
+}
+#noVNC_setting_enable_hidpi_option.show {
+  display: flex!important;
 }
 #noVNC_refreshMonitors {
   position: absolute;

app/ui.js

@@ -1869,18 +1869,28 @@ const UI = {
     initMonitors(screenPlan) {
         const { scale } = UI.multiMonitorSettings()
         let monitors = []
+        let showNativeResolution = false
         screenPlan.screens.forEach(screen => {
+            if (parseFloat(screen.pixelRatio) != 1) {
+                showNativeResolution = true
+            }
             monitors.push({
                 id: screen.screenID,
                 x: screen.x / scale,
                 y: screen.y / scale,
                 w: screen.serverWidth / scale,
                 h: screen.serverHeight / scale,
+                pixelRatio: screen.pixelRatio,
                 scale: 1,
                 fill: '#eeeeeecc',
                 isDragging: false
             })
         })
+        if (showNativeResolution) {
+            document.getElementById('noVNC_setting_enable_hidpi_option').classList.add("show");
+        } else {
+            document.getElementById('noVNC_setting_enable_hidpi_option').classList.remove("show");
+        }
         UI.monitors = monitors
     },
 
@@ -2775,7 +2785,7 @@ const UI = {
         // Get the current screen plan
         // When a new display is added, it is defaulted to be placed to the far right relative to existing displays and to the top
         let screenPlan = UI.rfb.getScreenPlan();
-
+        console.log(e)
         // Now make adjustments to the screen plan, this is just an example
        // screenPlan.screens[1].y = 0;
         

core/rfb.js

@@ -1491,6 +1491,7 @@ export default class RFB extends EventTargetMixin {
             //re-register the secondary display with new resolution
             this._registerSecondaryDisplay();
         }
+        this.dispatchEvent(new CustomEvent("screenregistered", {}));
     }
 
     // Gets the the size of the available screen
@@ -1677,6 +1678,7 @@ export default class RFB extends EventTargetMixin {
                     break;
                 case 'unregister':
                     if (this._display.removeScreen(event.data.screenID)) {
+                        this.dispatchEvent(new CustomEvent("screenregistered", {}));
                         Log.Info(`Secondary monitor (${event.data.screenID}) has been removed.`);
                         const size = this._screenSize();
                         RFB.messages.setDesktopSize(this._sock, size, this._screenFlags);

vnc.html

@@ -553,8 +553,8 @@
                     <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>
                     Add Monitor
                 </button>
-                <label class="button">
-                    <input style="margin-right: 10px;" id="noVNC_setting_enable_hidpi" type="checkbox" />
+                <label id="noVNC_setting_enable_hidpi_option" class="button">
+                    <input style="margin: 0 10px 0 3px;" id="noVNC_setting_enable_hidpi" type="checkbox" />
                     Native Resolution
                 </label>
             </div>