Added shortcut to toggle a mobile user agent

interfacer/src/browsh/tty.go

@@ -183,6 +183,7 @@ func renderCurrentTabWindow() {
 		}
 	}
 	if activeInputBox != nil { activeInputBox.renderCursor() }
+	overlayPageStatusMessage()
 	screen.Show()
 }
 

interfacer/src/browsh/ui.go

@@ -20,7 +20,6 @@ var (
 func renderUI() {
 	renderTabs()
 	renderURLBar()
-	overlayPageStatusMessage()
 }
 
 // Write a simple text string to the screen.

webext/manifest.json

@@ -30,6 +30,8 @@
 
   "permissions": [
     "<all_urls>",
+    "webRequest",
+    "webRequestBlocking",
     "tabs"
   ]
 }

webext/src/background/manager.js

@@ -26,6 +26,11 @@ export default class extends utils.mixins(CommonMixin, TTYCommandsMixin) {
     // Raw text mode is for when Browsh is running as an HTTP server that serves single
     // pages as entire DOMs, in plain text.
     this._is_raw_text_mode = false;
+    // A mobile user agent for forcing web pages to use its mobile layout
+    this._mobile_user_agent =
+      "Mozilla/5.0 (Android 7.0; Mobile; rv:54.0) Gecko/58.0 Firefox/58.0";
+    this._is_using_mobile_user_agent = false;
+    this._addUserAgentListener();
     // The manager is the hub between tabs and the terminal. First we connect to the
     // terminal, as that is the process that would have initially booted the browser and
     // this very code that now runs.

webext/src/background/tty_commands_mixin.js

@@ -70,6 +70,9 @@ export default (MixinBase) => class extends MixinBase {
         case 'p':
           this.screenshotActiveTab();
           break;
+        case 'u':
+          this.toggleUserAgent();
+          break;
       }
     }
     return false;
@@ -169,5 +172,33 @@ export default (MixinBase) => class extends MixinBase {
       })
     });
   }
+
+  toggleUserAgent() {
+    let message;
+    this._is_using_mobile_user_agent = !this._is_using_mobile_user_agent
+    if (this._is_using_mobile_user_agent) {
+      message = 'Mobile user agent active';
+    } else {
+      message = 'Desktop user agent active';
+    }
+    this.currentTab().updateStatus('info', message);
+  }
+
+  _addUserAgentListener() {
+    browser.webRequest.onBeforeSendHeaders.addListener(
+      (e) => {
+        if (this._is_using_mobile_user_agent) {
+          e.requestHeaders.forEach((header) => {
+            if (header.name.toLowerCase() == "user-agent") {
+              header.value = this._mobile_user_agent;
+            }
+          })
+          return {requestHeaders: e.requestHeaders};
+        }
+      },
+      {urls: ['*://*/*']},
+      ["blocking", "requestHeaders"]
+    );
+  }
 }
 

webext/src/dom/common_mixin.js

@@ -23,6 +23,12 @@ export default (MixinBase) => class extends MixinBase {
     }
   }
 
+  logError(error) {
+    this.log(`'${error.name}' ${error.message}`);
+    this.log(`@${error.fileName}:${error.lineNumber}`);
+    this.log(error.stack);
+  }
+
   // If you're logging large objects and using a high-ish FPS (<1000ms) then you might
   // crash the browser. So use this function instead.
   firstFrameLog(...logs) {

webext/src/dom/graphics_builder.js

@@ -163,6 +163,7 @@ export default class extends utils.mixins(CommonMixin) {
       width = this.dimensions.dom.sub.width;
       height = this.dimensions.dom.sub.height;
     }
+    if (width <= 0 || height <= 0) { return [] }
     this._updateCanvasSize();
     this._ctx.drawWindow(
       window,

webext/src/dom/manager.js

@@ -154,8 +154,8 @@ export default class extends utils.mixins(CommonMixin, CommandsMixin) {
     window.addEventListener("unload", () => {
       this.sendMessage('/status,window_unload')
     });
-    window.addEventListener('error', (event) => {
-      this.log("TAB JS: " + event)
+    window.addEventListener('error', (error) => {
+      this.logError(error)
     });
   }
 
@@ -176,9 +176,7 @@ export default class extends utils.mixins(CommonMixin, CommandsMixin) {
         this._handleBackgroundMessage(message);
       }
       catch(error) {
-        this.log(`'${error.name}' ${error.message}`);
-        this.log(`@${error.fileName}:${error.lineNumber}`);
-        this.log(error.stack);
+        this.logError(error);
       }
     });
   }