Add fullscreen button

js/term.js

@@ -14,12 +14,20 @@ window.termInit = function (labels, theme) {
   qs('#screen').appendChild(screen.canvas)
   screen.load(labels, theme) // load labels and theme
 
-  {
+  window.initSoftKeyboard(screen, input)
+  if (window.attachDebugScreen) window.attachDebugScreen(screen)
+
+  let isFullscreen = false
   let fitScreen = false
   let fitScreenIfNeeded = function fitScreenIfNeeded () {
+    if (isFullscreen) {
+      screen.window.fitIntoWidth = window.screen.width
+      screen.window.fitIntoHeight = window.screen.height
+    } else {
       screen.window.fitIntoWidth = fitScreen ? window.innerWidth - 20 : 0
       screen.window.fitIntoHeight = fitScreen ? window.innerHeight : 0
     }
+  }
   fitScreenIfNeeded()
   window.addEventListener('resize', fitScreenIfNeeded)
 
@@ -35,10 +43,39 @@ window.termInit = function (labels, theme) {
     }
     fitScreenIfNeeded()
   }
+
+  // add fullscreen mode & button
+  if (Element.prototype.requestFullscreen || Element.prototype.webkitRequestFullscreen) {
+    let checkForFullscreen = function () {
+      // document.fullscreenElement is not really support yet, so here's a hack
+      if (isFullscreen && (innerWidth !== window.screen.width || innerHeight !== window.screen.height)) {
+        isFullscreen = false
+        fitScreenIfNeeded()
+      }
     }
+    setInterval(checkForFullscreen, 500)
 
-  window.initSoftKeyboard(screen, input)
+    // (why are the buttons anchors?)
-  if (window.attachDebugScreen) window.attachDebugScreen(screen)
+    let button = mk('a')
+    button.href = '#'
+    button.addEventListener('click', e => {
+      e.preventDefault()
+
+      isFullscreen = true
+      fitScreenIfNeeded()
+      screen.updateSize()
+
+      if (screen.canvas.requestFullscreen) screen.canvas.requestFullscreen()
+      else screen.canvas.webkitRequestFullscreen()
+    })
+    let icon = mk('i')
+    icon.classList.add('icn-resize-full') // TODO: less confusing icons
+    button.appendChild(icon)
+    let span = mk('span')
+    span.textContent = 'Fullscreen'
+    button.appendChild(span)
+    qs('#term-nav').insertBefore(button, qs('#term-nav').firstChild)
+  }
 
   // for debugging
   window.termScreen = screen

js/term_screen.js

@@ -523,7 +523,7 @@ window.TermScreen = class TermScreen {
    * Updates the canvas size if it changed
    */
   updateSize () {
-    this._window.devicePixelRatio = window.devicePixelRatio || 1
+    this._window.devicePixelRatio = this._windowScale * (window.devicePixelRatio || 1)
 
     let didChange = false
     for (let key in this.windowState) {
@@ -537,7 +537,6 @@ window.TermScreen = class TermScreen {
       const {
         width,
         height,
-        devicePixelRatio,
         gridScaleX,
         gridScaleY,
         fitIntoWidth,
@@ -550,7 +549,6 @@ window.TermScreen = class TermScreen {
       let realHeight = height * cellSize.height
 
       if (fitIntoWidth && fitIntoHeight) {
-        if (realWidth > fitIntoWidth || realHeight > fitIntoHeight) {
         let terminalAspect = realWidth / realHeight
         let fitAspect = fitIntoWidth / fitIntoHeight
 
@@ -563,11 +561,10 @@ window.TermScreen = class TermScreen {
           realWidth = fitIntoWidth
           realHeight = realWidth / terminalAspect
         }
-        }
+      } else if (fitIntoWidth) {
-      } else if (fitIntoWidth && realWidth > fitIntoWidth) {
         realHeight = fitIntoWidth / (realWidth / realHeight)
         realWidth = fitIntoWidth
-      } else if (fitIntoHeight && realHeight > fitIntoHeight) {
+      } else if (fitIntoHeight) {
         realWidth = fitIntoHeight * (realWidth / realHeight)
         realHeight = fitIntoHeight
       }
@@ -575,6 +572,8 @@ window.TermScreen = class TermScreen {
       // store new window scale
       this._windowScale = realWidth / (width * cellSize.width)
 
+      let devicePixelRatio = this._window.devicePixelRatio = this._windowScale * window.devicePixelRatio
+
       this.canvas.width = width * devicePixelRatio * cellSize.width
       this.canvas.style.width = `${realWidth}px`
       this.canvas.height = height * devicePixelRatio * cellSize.height