[Mobile] Use tabs as prompts if the browser.windows API is missing.

src/ui/Prompts.js

@@ -1,8 +1,8 @@
 var Prompts = (() => {
 
-
   var promptData;
   var backlog = [];
+
   class WindowManager {
     async open(data) {
       promptData = data;
@@ -17,6 +17,11 @@ var Prompts = (() => {
       if (UA.isMozilla) {
         options.allowScriptsToClose = true;
       }
+      if (!("windows" in browser)) {
+        // Android, most likely
+        this.currentTab = await browser.tabs.create({url: options.url});
+        return;
+      }
       this.currentWindow = await browser.windows.create(options);
       // work around for https://bugzilla.mozilla.org/show_bug.cgi?id=1330882
       let {left, top, width: cw, height: ch} = this.currentWindow;
@@ -36,6 +41,8 @@ var Prompts = (() => {
           debug(e);
         }
         this.currentWindow = null;
+      } else if (this.currentTab) {
+        await browser.tabs.remove(this.currentTab.id);
       }
     }
 

src/ui/prompt.css

@@ -1,22 +1,30 @@
 
+html {
+  background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 41%,#9fd8ef 90%,#2ab0ed 100%) no-repeat;
+}
+
 body {
-  bottom: 8px;
+  bottom: .8em;
   font-family: sans-serif;
   font-size: 12px;
   color: #222;
   margin: 0px;
-  padding: 8px;
+  padding: .8em;
-  background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 41%,#9fd8ef 90%,#2ab0ed 100%) no-repeat;
+}
+
+html.mobile > body {
+  font-family: Inter, sans-serif;
+  font-size: 12mm;
+  min-width: auto;
 }
 
 #header {
   text-align: left;
   margin: 0;
-  line-height: 24px;
+  line-height: 2em;
   color: #048;
-  font-size: 24px;
   z-index: 500;
-  padding: 8px 8px 0 8px;
+  padding: .8em .8em 0 .8em;
   display: block;
   background: url(/img/icon96.png) no-repeat top right;
   height: 96px;
@@ -24,7 +32,7 @@ body {
 
 #title {
   margin-right: 96px;
-  font-size: 24px;
+  font-size: 1.3em;
   bottom: 0;
   top: 0;
 }
@@ -33,7 +41,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 16px;
+  padding: 0 1.6em;
   top: 0;
   left: 0;
   right:0;
@@ -44,19 +52,19 @@ body {
 #message {
   flex-grow: 1;
   width: 100%;
-  max-height: 300px;
+  max-height: 28em;
-  padding: 8px;
+  padding: .8em;
   text-align: center;
 }
 #message.multiline {
   overflow: auto;
-  font-size: 12px;
+  font-size: 1em;
   text-align: justify;
-  margin-bottom: 16px;
+  margin-bottom: 1.2em;
   background: rgba(255,255,255,.5);
 }
 #message.multiline p {
-  margin: 1px;
+  margin: .1em;
   padding: 0;
 }
 #options {
@@ -93,9 +101,10 @@ body {
   flex-grow: 0;
   flex-direction: row;
   align-items: center;
-  margin: 8px;
+  margin: .8em;
   justify-content: space-around;
 }
 #buttons button {
-  min-width: 100px;
+ min-width: 6em;
+ font-size: 1em;
 }

src/ui/prompt.js

@@ -1,4 +1,5 @@
 (async () => {
+  document.documentElement.classList.toggle("mobile", !!UA.isMobile);
   window.bg = await browser.runtime.getBackgroundPage();
   ["Prompts"]
     .forEach(p => window[p] = bg[p]);
@@ -90,6 +91,7 @@
   }
 
   let resize = async () => {
+    if (!("windows" in browser)) return;
     let win = await browser.windows.getCurrent();
     let delta = document.documentElement.offsetHeight - window.innerHeight;
     await browser.windows.update(win.id, {

src/ui/resize_hack.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", async e => {
+if ("windows" in browser) document.addEventListener("DOMContentLoaded", async e => {
   // Fix for Fx57 bug where bundled page loaded using
   // browser.windows.create won't show contents unless resized.
   // See https://bugzilla.mozilla.org/show_bug.cgi?id=1402110