WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a new Desktop HP device (large DPR2 screen)

Browse Source
This commit is contained in:
Gaël Métais
2020-10-04 10:09:06 +02:00
parent 2d2da6e939
commit f62e9baa4a
10 changed files with 32 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bin/cli.js
+2 -2
View File
@@ -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
+8 -4
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+3 -2
View File
@@ -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
+1 -1
View File
@@ -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
+9 -44
View File
@@ -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 -2
View File
@@ -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 -2
View File
@@ -3,9 +3,10 @@
"phantomasEngine": "webkit",
"googleAnalyticsId": "",
"screenshotWidth": {
"desktop": 600,
"phone": 360,
"tablet": 420,
"phone": 360
"desktop": 600,
"desktop-hd": 600
},
"baseUrl": "/",
"authorizedKeys": {