feat: browser window size now takes into calculation os nav bars

Author: calebjclark

core-interfaces/IBrowserEmulator.ts

@@ -1,10 +1,13 @@
 import INetworkInterceptorDelegate from './INetworkInterceptorDelegate';
 import IUserProfile from './IUserProfile';
 import INewDocumentInjectedScript from './INewDocumentInjectedScript';
+import IWindowFraming from "./IWindowFraming";
 
 export default interface IBrowserEmulator {
   readonly navigatorUserAgent: string;
   readonly navigatorPlatform: string;
+  readonly windowFramingBase: IWindowFraming;
+  readonly windowFraming: IWindowFraming;
   readonly canPolyfill: boolean;
   readonly networkInterceptorDelegate: INetworkInterceptorDelegate;
   locale: string;

core-interfaces/IWindowFraming.ts

@@ -0,0 +1,8 @@
+export default interface IWindowFraming {
+  screenGapLeft: number;
+  screenGapTop: number;
+  screenGapRight: number;
+  screenGapBottom: number;
+  frameBorderWidth: number;
+  frameBorderHeight: number;
+}

core/lib/Session.ts

@@ -18,9 +18,9 @@ import IBrowserEmulationSettings from '@secret-agent/puppet-interfaces/IBrowserE
 import { IPuppetPage } from '@secret-agent/puppet-interfaces/IPuppetPage';
 import IViewport from '@secret-agent/core-interfaces/IViewport';
 import IHumanEmulator from '@secret-agent/core-interfaces/IHumanEmulator';
-import Viewport from '@secret-agent/emulate-browsers-base/lib/Viewport';
 import IBrowserEmulator from '@secret-agent/core-interfaces/IBrowserEmulator';
 import IBrowserEngine from '@secret-agent/core-interfaces/IBrowserEngine';
+import Viewports from './Viewports';
 import GlobalPool from './GlobalPool';
 import Tab from './Tab';
 import UserProfile from './UserProfile';
@@ -82,7 +82,7 @@ export default class Session {
     this.timezoneId = options.timezoneId;
     this.viewport = options.viewport;
     if (!this.viewport) {
-      this.viewport = Viewport.getMostPopular();
+      this.viewport = Viewports.getDefault(this.browserEmulator.windowFramingBase, this.browserEmulator.windowFraming);
     }
 
     const humanEmulatorId = options.humanEmulatorId || HumanEmulators.getRandomId();

core/lib/Viewports.ts

@@ -0,0 +1,22 @@
+import IViewport from '@secret-agent/core-interfaces/IViewport';
+import IWindowFraming from "../../core-interfaces/IWindowFraming";
+
+export default class Viewports {
+  static getDefault(windowFramingBase: IWindowFraming, windowFraming: IWindowFraming) {
+    const screenWidth = 1440;
+    const screenHeight = 900;
+    const positionX = windowFraming.screenGapLeft;
+    const positionY = windowFraming.screenGapTop;
+    const windowWidth = screenWidth - (windowFramingBase.screenGapLeft + windowFramingBase.screenGapRight);
+    const windowHeight = screenHeight - (windowFramingBase.screenGapTop + windowFramingBase.screenGapBottom);
+    return {
+      positionX,
+      positionY,
+      screenWidth,
+      screenHeight,
+      width: windowWidth,
+      height: windowHeight,
+      deviceScaleFactor: 1,
+    } as IViewport;
+  }
+}

emulate-browsers/base/data/resolution.json

@@ -1,3 +1,3 @@
-if (args.windowFrame && !window.outerHeight) {
-  proxyGetter(window, 'outerHeight', () => window.innerHeight + args.windowFrame, true);
+if (!window.outerHeight) {
+  proxyGetter(window, 'outerHeight', () => window.innerHeight + (args.frameBorderHeight || 0), true);
 }

emulate-browsers/base/injected-scripts/window.outerHeight.ts

@@ -1,3 +1,3 @@
 if (!window.outerWidth) {
-  proxyGetter(window, 'outerWidth', () => window.innerWidth, true);
+  proxyGetter(window, 'outerWidth', () => window.innerWidth + (args.frameBorderWidth || 0), true);
 }

emulate-browsers/base/injected-scripts/window.outerWidth.ts

@@ -1,4 +1,8 @@
 {
-  "width": 0,
-  "height": 80
+  "screenGapLeft": 0,
+  "screenGapTop": 23,
+  "screenGapRight": 0,
+  "screenGapBottom": 4,
+  "frameBorderWidth": 0,
+  "frameBorderHeight": 80
 }

emulate-browsers/base/lib/Viewport.ts

@@ -1,4 +1,8 @@
 {
-  "width": 0,
-  "height": 79
+  "screenGapLeft": 0,
+  "screenGapTop": 23,
+  "screenGapRight": 0,
+  "screenGapBottom": 4,
+  "frameBorderWidth": 0,
+  "frameBorderHeight": 79
 }