Initialize dedicated window with size of current remote screen (#1590)

Resolves #728. Stacked on
#1589.

For convenience and smoother UX, this PR detects the size of the remote
screen in order to intialize the popup window with the exact same
dimensions as the remote screen. That also ensures that the remote
screen fits into the popup window exactly, with no extra padding.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1590"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

app/static/js/app.js

@@ -333,7 +333,17 @@ menuBar.addEventListener("keyboard-visibility-toggled", () => {
 });
 menuBar.addEventListener("dedicated-window-requested", () => {
   // Open popup window in standalone view mode (without menu bar or status bar).
-  window.open("/?viewMode=standalone", undefined, "popup=true");
+  // Determine the current size of the remote screen, and take it over as
+  // initial size for the popup window. This is just convenience functionality:
+  // it subtly illustrates the mechanism of the remote screen “popping out” to
+  // its own window as is, and it also respects if the user had manually
+  // adjusted the window size to optimize ergonomics.
+  const { width, height } = document.getElementById("remote-screen").size();
+  window.open(
+    "/?viewMode=standalone",
+    undefined,
+    `popup=true,width=${width},height=${height}`
+  );
 
   // Redirect the user to a placeholder page. We can’t keep the main window
   // open as is, because then we’d have a duplicate video stream (which would

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

@@ -270,6 +270,11 @@
           return ["fullscreen", "milliseconds-between-mouse-events"];
         }
 
+        size() {
+          const screen = this._getCurrentScreenElement();
+          return { width: screen.clientWidth, height: screen.clientHeight };
+        }
+
         attributeChangedCallback(name, oldValue, newValue) {
           if (name === "fullscreen" && newValue === "true") {
             const screenWrapper =