Add a new Desktop HP device (large DPR2 screen)

bin/cli.js

@@ -13,7 +13,7 @@ var cli = meow({
         '  yellowlabtools <url> <options>',
         '',
         'Options:',
-        '  --device             Use "phone" or "tablet" to simulate a mobile device (by user-agent and viewport size).',
+        '  --device             Simulates a device. Choose between phone (default), tablet, desktop and desktop-hd.',
         '  --screenshot         Will take a screenshot and use this value as the output path. It needs to end with ".png".',
         //'  --wait-for-selector  Once the page is loaded, Phantomas will wait until the given CSS selector matches some elements.',
         '  --proxy              Sets an HTTP proxy to pass through. Syntax is "host:port".',
@@ -55,7 +55,7 @@ if (screenshot) {
 }
 
 // Device simulation
-options.device = cli.flags.device || 'desktop';
+options.device = cli.flags.device || 'mobile';
 
 // Wait for CSS selector
 options.waitForSelector = cli.flags.waitForSelector || null;

front/src/css/main.css

@@ -155,13 +155,15 @@ a.linkButton {
 .screenshotWrapper .screenshotError {
   color: #fff;
 }
-.screenshotWrapper.desktop {
+.screenshotWrapper.desktop,
+.screenshotWrapper.desktop-hd {
   border: 0.2em solid #AAA;
   padding: 0.5em;
   border-top-left-radius: 0.4em;
   border-top-right-radius: 0.4em;
 }
-.screenshotWrapper.desktop:before {
+.screenshotWrapper.desktop:before,
+.screenshotWrapper.desktop-hd:before {
   position: absolute;
   width: 15em;
   height: 0.6em;
@@ -172,7 +174,8 @@ a.linkButton {
   border-bottom-right-radius: 0.2em;
   content: " ";
 }
-.screenshotWrapper.desktop:after {
+.screenshotWrapper.desktop:after,
+.screenshotWrapper.desktop-hd:after {
   position: absolute;
   width: 0.4em;
   height: 0.2em;
@@ -181,7 +184,8 @@ a.linkButton {
   background: lime;
   content: " ";
 }
-.screenshotWrapper.desktop > div {
+.screenshotWrapper.desktop > div,
+.screenshotWrapper.desktop-hd > div {
   width: 12em;
   height: 6.75em;
 }

front/src/js/services/settingsService.js

@@ -6,7 +6,7 @@ settingsService.factory('Settings', ['localStorageService', function(localStorag
 
         getMergedSettings: function() {
             var defaultSettings = {
-                device: 'desktop',
+                device: 'mobile',
                 showAdvanced: false
             };
             

front/src/less/main.less

@@ -168,7 +168,7 @@ a.linkButton {
     }
 }
 
-.screenshotWrapper.desktop {
+.screenshotWrapper.desktop, .screenshotWrapper.desktop-hd {
     border: 0.2em solid #AAA;
     padding: 0.5em;
     border-top-left-radius: 0.4em;

front/src/views/dashboard.html

@@ -18,7 +18,7 @@
         </div>
         <div>
             <a href="result/{{result.runId}}/screenshot">
-                <div class="screenshotWrapper" ng-class="result.params.options.device || 'desktop'">
+                <div class="screenshotWrapper" ng-class="result.params.options.device || 'phone'">
                     <div>
                         <img ng-if="result.screenshotUrl" class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
                         <span ng-if="!result.screenshotUrl" class="screenshotError">Screenshot not available</span>

front/src/views/index.html

@@ -7,9 +7,10 @@
     <div class="settings">
         <div class="device">
             <div>Choose the simulated device:</div>
-            <a href="" class="item" ng-class="{active: settings.device == 'desktop'}" ng-click="settings.device = 'desktop'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M512 416V32H0v384h224v32h-96v32h256v-32h-96v-32h224zM64 96h384v256H64V96z"/></svg>Desktop</a>
-            <a href="" class="item" ng-class="{active: settings.device == 'tablet'}" ng-click="settings.device = 'tablet'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M400 0H80C54 0 32 22 32 48v416c0 26 22 48 48 48h320c26 0 48-22 48-48V48c0-26-22-48-48-48zM240 496a16 16 0 110-32 16 16 0 010 32zm144-48H96V64h288v384z"/></svg>Tablet</a>
             <a href="" class="item" ng-class="{active: settings.device == 'phone'}" ng-click="settings.device = 'phone'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M368 0H144c-26 0-48 22-48 48v416c0 26 22 48 48 48h224c26 0 48-22 48-48V48c0-26-22-48-48-48zM192 24h128v16H192V24zm64 456a32 32 0 110-64 32 32 0 010 64zm128-96H128V64h256v320z"/></svg>Phone</a>
+            <a href="" class="item" ng-class="{active: settings.device == 'tablet'}" ng-click="settings.device = 'tablet'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M400 0H80C54 0 32 22 32 48v416c0 26 22 48 48 48h320c26 0 48-22 48-48V48c0-26-22-48-48-48zM240 496a16 16 0 110-32 16 16 0 010 32zm144-48H96V64h288v384z"/></svg>Tablet</a>
+            <a href="" class="item" ng-class="{active: settings.device == 'desktop'}" ng-click="settings.device = 'desktop'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M512 416V32H0v384h224v32h-96v32h256v-32h-96v-32h224zM64 96h384v256H64V96z"/></svg>Desktop</a>
+            <a href="" class="item" ng-class="{active: settings.device == 'desktop-hd'}" ng-click="settings.device = 'desktop-hd'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M512 416V32H0v384h224v32h-96v32h256v-32h-96v-32zM64 96h384v256H64z"/><path d="M270 297V161h28c14 0 25 2 33 4 8 3 16 7 23 14 14 13 21 29 21 50s-7 38-22 51c-7 6-15 11-23 13-8 3-18 4-32 4zm20-19h10c9 0 16-1 23-3a47 47 0 0031-46c0-15-5-27-15-36-9-8-22-12-39-12h-10zm-123-64h59v-53h20v136h-20v-63h-59v63h-20V161h20z"/></svg>Desktop</a>
         </div>
         [ <a href="" class="showAdvanced" ng-click="settings.showAdvanced = !settings.showAdvanced">
             <span ng-if="!settings.showAdvanced">Advanced settings &nbsp;✚</span>

front/src/views/screenshot.html

@@ -2,7 +2,7 @@
 <div class="screenshot board">
     <h2>Screenshot</h2>
 
-    <div class="screenshotWrapper" ng-class="result.params.options.device || 'desktop'">
+    <div class="screenshotWrapper" ng-class="result.params.options.device || 'phone'">
         <div>
             <img ng-if="result.screenshotUrl" class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
             <span ng-if="!result.screenshotUrl" class="screenshotError">Screenshot not available</span>

lib/tools/phantomas/phantomasWrapper.js

@@ -17,49 +17,14 @@ var PhantomasWrapper = function() {
         var deferred = Q.defer();
         var task = data.params;
 
-        /*var options = {
-            
-            // Cusomizable options
-            'engine': task.options.phantomasEngine || 'webkit',
-            'timeout': task.options.timeout || 30,
-            'user-agent': (task.options.device === 'desktop') ? 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) YLT Chrome/27.0.1453.110 Safari/537.36' : null,
-            'tablet': (task.options.device === 'tablet'),
-            'phone': (task.options.device === 'phone'),
-            'screenshot': task.options.screenshot || false,
-            'wait-for-selector': task.options.waitForSelector,
-            'cookie': task.options.cookie,
-            'auth-user': task.options.authUser,
-            'auth-pass': task.options.authPass,
-            'block-domain': task.options.blockDomain,
-            'allow-domain': task.options.allowDomain,
-            'no-externals': task.options.noExternals,
-
-            // Mandatory
-            'reporter': 'json:pretty',
-            'analyze-css': true,
-            'ignore-ssl-errors': true,
-            'skip-modules': [
-                'ajaxRequests', // overridden
-                'domHiddenContent', // overridden
-                'domMutations', // not compatible with webkit
-                'domQueries', // overridden
-                'events', // overridden
-                'filmStrip', // not needed
-                'har', // not needed for the moment
-                'javaScriptBottlenecks', // needs to be launched after custom module scopeYLT
-                'jQuery', // overridden
-                'jserrors', // overridden
-                'lazyLoadableImages', //overridden
-                'pageSource', // not needed
-                'windowPerformance' // overridden
-            ].join(','),
-            'include-dirs': [
-                path.join(__dirname, 'custom_modules/core'),
-                path.join(__dirname, 'custom_modules/modules')
-            ].join(',')
-        };
-
-        */
+        var viewportOption = null;
+        if (task.options.device === 'desktop') {
+            // Similar to an old non-retina Macbook Air 13"
+            viewportOption = '1280x800x1';
+        } else if (task.options.device === 'desktop-hd') {
+            // Similar to a retina Macbook Pro 16"
+            viewportOption = '1536x960x2';
+        }
 
         var options = {
             
@@ -69,7 +34,7 @@ var PhantomasWrapper = function() {
             'tablet': (task.options.device === 'tablet'),
             'phone': (task.options.device === 'phone'),
             'screenshot': task.options.screenshot || false,
-            'viewport': (task.options.device === 'desktop') ? '1280x800x1' : null,
+            'viewport': viewportOption,
             'wait-for-network-idle': true,
             //'wait-for-selector': task.options.waitForSelector,
             'cookie': task.options.cookie,

server_config/settings-prod.json

@@ -3,9 +3,10 @@
     "phantomasEngine": "webkit",
     "googleAnalyticsId": "",
     "screenshotWidth": {
-        "desktop": 600,
+        "phone": 360,
         "tablet": 420,
-        "phone": 360
+        "desktop": 600,
+        "desktop-hd": 600
     },
     "baseUrl": "/",
     "authorizedKeys": {

server_config/settings.json

@@ -3,9 +3,10 @@
     "phantomasEngine": "webkit",
     "googleAnalyticsId": "",
     "screenshotWidth": {
-        "desktop": 600,
+        "phone": 360,
         "tablet": 420,
-        "phone": 360
+        "desktop": 600,
+        "desktop-hd": 600
     },
     "baseUrl": "/",
     "authorizedKeys": {