Proof of concept for popping out the remote screen

app/static/css/style.css

@@ -62,12 +62,6 @@ body {
 }
 
 .container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  margin: 0 auto;
-  padding-top: 55px; /* Account for menu bar plus some extra spacing */
 }
 
 .header-bar {

app/static/js/app.js

@@ -345,6 +345,14 @@ menuBar.addEventListener("change-hostname-dialog-requested", () => {
 menuBar.addEventListener("fullscreen-requested", () => {
   document.getElementById("remote-screen").fullscreen = true;
 });
+menuBar.addEventListener("popup-requested", () => {
+  const screenSize = document.getElementById("remote-screen").screenSize;
+  window.open(
+    "/?viewMode=standalone",
+    undefined,
+    `popup=true,width=${screenSize.width},height=${screenSize.height}`
+  );
+});
 menuBar.addEventListener("debug-logs-dialog-requested", () => {
   document.getElementById("debug-dialog").retrieveLogs();
   document.getElementById("debug-overlay").show();

app/templates/custom-elements/menu-bar.html

@@ -265,6 +265,11 @@
             >Full Screen</a
           >
         </li>
+        <li class="item" role="presentation">
+          <a data-onclick-event="popup-requested" role="menuitem"
+            >Popup Window</a
+          >
+        </li>
       </ul>
     </li>
 

app/templates/custom-elements/remote-screen.html

@@ -2,34 +2,29 @@
   <style>
     @import "css/cursors.css";
 
-    .screen {
-      max-width: 100%;
-      max-height: 70vh;
-      object-fit: contain;
+    :host {
+      --menu-bar-height: 45px;
+      --status-bar-height: 31px;
+      --bar-padding: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: calc(var(--menu-bar-height) + var(--bar-padding));
     }
 
-    @media screen and (min-height: 450px) {
-      .screen {
-        max-height: 80vh;
-      }
+    :host([no-margin=""]) {
+      --menu-bar-height: 0px;
+      --status-bar-height: 0px;
+      --bar-padding: 0px;
     }
 
-    @media screen and (min-height: 600px) {
-      .screen {
-        max-height: 85vh;
-      }
-    }
-
-    @media screen and (min-height: 900px) {
-      .screen {
-        max-height: 90vh;
-      }
-    }
-
-    @media screen and (min-height: 1180px) {
-      .screen {
-        max-height: 100vh;
-      }
+    .screen {
+      max-width: 100%;
+      max-height: calc(
+        100vh - var(--menu-bar-height) - var(--status-bar-height) - 2 *
+          var(--bar-padding)
+      );
+      object-fit: contain;
     }
 
     :host([fullscreen="true"]) .screen-wrapper {
@@ -219,6 +214,11 @@
           this.setAttribute("fullscreen", newValue);
         }
 
+        get screenSize() {
+          const screen = this._getCurrentScreenElement();
+          return { width: screen.clientWidth, height: screen.clientHeight };
+        }
+
         get millisecondsBetweenMouseEvents() {
           return parseInt(
             this.getAttribute("milliseconds-between-mouse-events")

app/templates/index.html

@@ -18,14 +18,34 @@
     {% endfor %}
 
     <div id="app" tabindex="0">
-      <div class="header-bar">
+      <div
+        class="header-bar"
+        {%
+        if
+        is_standalone_mode
+        %}
+        style="display: none"
+        {%
+        endif
+        %}
+      >
         <menu-bar id="menu-bar"></menu-bar>
       </div>
-      <div class="footer-bar">
+      <div
+        class="footer-bar"
+        {%
+        if
+        is_standalone_mode
+        %}
+        style="display: none"
+        {%
+        endif
+        %}
+      >
         <status-bar id="status-bar"></status-bar>
       </div>
 
-      <div class="page-content container">
+      <div>
         <overlay-panel id="error-overlay" variant="danger">
           <error-dialog id="error-dialog"></error-dialog>
         </overlay-panel>
@@ -58,6 +78,14 @@
         <remote-screen
           id="remote-screen"
           milliseconds-between-mouse-events="600"
+          {%
+          if
+          is_standalone_mode
+          %}
+          no-margin
+          {%
+          endif
+          %}
         ></remote-screen>
 
         <on-screen-keyboard id="on-screen-keyboard"></on-screen-keyboard>

app/views.py

@@ -19,6 +19,7 @@ def index_get():
         'index.html',
         use_webrtc_remote_screen=use_webrtc,
         page_title_prefix=_page_title_prefix(),
+        is_standalone_mode=_is_standalone_mode(),
         custom_elements_files=find_files.custom_elements_files())
 
 
@@ -47,3 +48,7 @@ def _page_title_prefix():
     if hostname.determine().lower() != _DEFAULT_HOSTNAME.lower():
         return f'{hostname.determine()} - '
     return ''
+
+
+def _is_standalone_mode():
+    return flask.request.args.get("viewMode") == "standalone"