Skip to content

Commit 3ab17bd

Browse files
isonic1isonic1
committed
fixed local storage, rounded width and height to whole numbers, fixed info links
1 parent 275912c commit 3ab17bd

File tree

5 files changed

+76
-60
lines changed

5 files changed

+76
-60
lines changed

‎package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,11 @@
3737
"webpack": "^5.74.0",
3838
"webpack-cli": "^4.10.0"
3939
},
40+
"pinnedDependenciesDoNotUpdate": {
41+
"@applitools/eyes-images": "4.21.0"
42+
},
4043
"dependencies": {
41-
"@applitools/eyes-images": "^4.30.3",
44+
"@applitools/eyes-images": "4.21.0",
4245
"@applitools/types": "^1.5.19",
4346
"assert": "^2.0.0",
4447
"browser-process-hrtime": "^1.0.0",

‎src/plugin.ts

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,7 @@ figma.ui.onmessage = async (msg) => {
1414
figma.notify("Getting Designs")
1515
await figma.clientStorage.setAsync('applitoolsApiKey', msg.applitoolsApiKey);
1616
await figma.clientStorage.setAsync('serverUrl', msg.serverUrl);
17-
// View messenger data
18-
// for (const key in msg) {
19-
// if (msg.hasOwnProperty(key)) {
20-
// console.log(msg[key]);
21-
// }
22-
// }
23-
24-
getDesigns(msg.everything, msg.arrWidths)
17+
await getDesigns(msg.everything, msg.arrWidths)
2518
break
2619
case 'CANCEL':
2720
figma.closePlugin()
@@ -104,23 +97,18 @@ async function getDesigns(everything=false, arrWidths) {
10497
figma.ui.postMessage({ results, dupResults })
10598
}
10699

107-
async function sendServerUrlToUI() {
108-
const serverUrl = await figma.clientStorage.getAsync('serverUrl');
109-
//console.log('Storage serverUrl: ' + serverUrl)
110-
figma.ui.postMessage({ serverUrl });
111-
}
112-
113100
switch(figma.command) {
114101
case "settings":
115102
figma.showUI(__html__);
116103
figma.ui.resize(500,500);
117104
(async () => {
118105
try {
119106
let applitoolsApiKey = await figma.clientStorage.getAsync('applitoolsApiKey')
107+
let serverUrl = await figma.clientStorage.getAsync('serverUrl');
120108
figma.ui.postMessage({applitoolsApiKey});
121-
await sendServerUrlToUI();
109+
figma.ui.postMessage({serverUrl});
122110
} catch (e) {
123-
// Deal with the fact the chain failed
111+
console.log(e);
124112
}
125113
})();
126114

‎src/ui.html

Lines changed: 52 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -423,34 +423,48 @@
423423
.results a:hover {
424424
text-decoration: underline;
425425
}
426-
426+
427427
.tooltip-container {
428-
position: relative;
429-
display: inline-block;
430-
margin-left: 6px;
431-
cursor: pointer;
432-
vertical-align: middle;
433-
}
434-
a.tooltip-container {
435-
text-decoration: none;
436-
color: inherit;
428+
position: relative;
429+
display: inline-block;
430+
cursor: pointer;
431+
margin-left: 6px;
437432
}
433+
438434
.info-icon {
439-
display: inline-block;
440-
width: 16px;
441-
height: 16px;
442-
background: #e2e2e2;
443-
color: #183153;
444-
border-radius: 50%;
445-
text-align: center;
446-
font-size: 12px;
447-
line-height: 16px;
448-
font-weight: bold;
449-
transition: background 0.2s;
450-
}
451-
.tooltip-container:hover .info-icon {
452-
background: var(--primary);
453-
color: #fff;
435+
display: inline-block;
436+
width: 16px;
437+
height: 16px;
438+
background: #e2e2e2;
439+
color: #183153;
440+
border-radius: 50%;
441+
text-align: center;
442+
font-size: 12px;
443+
line-height: 16px;
444+
font-weight: bold;
445+
transition: background 0.2s;
446+
}
447+
448+
.tooltip-text {
449+
visibility: hidden;
450+
width: 220px;
451+
background-color: #333;
452+
color: #fff;
453+
text-align: left;
454+
border-radius: 4px;
455+
padding: 8px;
456+
position: absolute;
457+
z-index: 1;
458+
bottom: 125%;
459+
left: 50%;
460+
transform: translateX(-50%);
461+
opacity: 0;
462+
transition: opacity 0.2s;
463+
}
464+
465+
.tooltip-container:hover .tooltip-text {
466+
visibility: visible;
467+
opacity: 1;
454468
}
455469
</style>
456470
<body>
@@ -470,7 +484,7 @@
470484
<div class="input-wrapper">
471485
<label class="label" for="key">
472486
Applitools API Key
473-
<a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
487+
<a href="https://applitools.com/tutorials/getting-started/retrieve-api-key" target="_blank" class="tooltip-container">
474488
<span class="info-icon">?</span>
475489
</a>
476490
</label>
@@ -480,9 +494,10 @@
480494
<div class="input-wrapper">
481495
<label class="label" for="url">
482496
Eyes Server URL
483-
<a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
484-
<span class="info-icon">?</span>
485-
</a>
497+
<span class="tooltip-container">
498+
<span class="info-icon">?</span>
499+
<span class="tooltip-text">This is the URL of your Applitools Eyes server (e.g. https://eyes.applitools.com).</span>
500+
</span>
486501
</label>
487502
<input id="url" class="input" type="text" value="https://eyes.applitools.com" />
488503
</div>
@@ -493,17 +508,17 @@
493508
<div class="input-wrapper">
494509
<label class="label" for="proxy">
495510
Proxy URL
496-
<a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
511+
<!-- <a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
497512
<span class="info-icon"> ?</span>
498-
</a>
513+
</a> -->
499514
</label>
500515
<input id="proxy" class="input" type="text" placeholder="http://username:password@proxy.example.com:8080" />
501516
</div>
502517

503518
<div class="input-wrapper">
504519
<label class="label" for="matchLevel">
505520
Match Level
506-
<a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
521+
<a href="https://applitools.com/tutorials/concepts/best-practices/match-levels" target="_blank" class="tooltip-container">
507522
<span class="info-icon">?</span>
508523
</a>
509524
</label>
@@ -522,7 +537,7 @@
522537
<div class="input-wrapper">
523538
<label class="label" for="contrastLevel">
524539
Contrast Level
525-
<a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
540+
<a href="https://applitools.com/tutorials/concepts/test-execution/accessibility-testing" target="_blank" class="tooltip-container">
526541
<span class="info-icon">?</span>
527542
</a>
528543
</label>
@@ -573,7 +588,7 @@
573588
<div class="input-wrapper">
574589
<label class="label" for="os">
575590
OS Name Override
576-
<a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
591+
<a href="https://help.applitools.com/hc/en-us/articles/360007189271-Overriding-OS-and-hosting-applications-parameters" target="_blank" class="tooltip-container">
577592
<span class="info-icon">?</span>
578593
</a>
579594
</label>
@@ -583,7 +598,7 @@
583598
<div class="input-wrapper">
584599
<label class="label" for="browser">
585600
Browser Name Override
586-
<a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
601+
<a href="https://help.applitools.com/hc/en-us/articles/360007189271-Overriding-OS-and-hosting-applications-parameters" target="_blank" class="tooltip-container">
587602
<span class="info-icon">?</span>
588603
</a>
589604
</label>
@@ -593,9 +608,9 @@
593608
<div class="input-wrapper">
594609
<label class="label" for="widths">
595610
Additional Widths
596-
<a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
611+
<!-- <a href="https://applitools.com/docs/placeholder" target="_blank" class="tooltip-container">
597612
<span class="info-icon">?</span>
598-
</a>
613+
</a> -->
599614
</label>
600615
<input id="widths" class="input" type="text" placeholder="e.g. 800,1200" />
601616
</div>

‎src/ui.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ onmessage = async event => {
6363
(<HTMLInputElement>document.getElementById('key')).value = message.applitoolsApiKey
6464
}
6565

66+
if (message.serverUrl) {
67+
(<HTMLInputElement>document.getElementById('url')).value = message.serverUrl
68+
}
69+
6670
if (message.dupResults && message.dupResults.designs.length) {
6771
console.log("duplicates found: " + message.dupResults.designs.length);
6872
console.log("Frame names must be unique for each resolution/viewport.");
@@ -95,6 +99,7 @@ onmessage = async event => {
9599
viewportSize: test._hostDisplaySize.toString(),
96100
hostApp: test._hostApp,
97101
hostOS: test._hostOS,
102+
baselineEnvName: test._serverConnector._configuration._baselineEnvName,
98103
status: test._status,
99104
};
100105
});
@@ -216,6 +221,8 @@ async function upload(results, baselineList, projectName) {
216221
await results.designs.map(async (design) => {
217222
let testResults;
218223
let testName = `${design.name}`
224+
let width;
225+
let height;
219226

220227
const eyes = new Eyes()
221228

@@ -229,7 +236,10 @@ async function upload(results, baselineList, projectName) {
229236
eyes.setProxy(proxyUrl);
230237
}
231238

232-
let baselineEnvName = `${testName}_${design.width}`;
239+
width = Math.round(Number(design.width));
240+
height = Math.round(Number(design.height));
241+
242+
let baselineEnvName = `${testName}_${width}`;
233243
eyes.setBaselineEnvName(`${baselineEnvName}`);
234244

235245
const os = (<HTMLInputElement>document.getElementById('os')).value;
@@ -239,7 +249,7 @@ async function upload(results, baselineList, projectName) {
239249
eyes.setHostOS(os)
240250

241251
baselineList.push(`Test Name: ${testName}<br>Baseline Environment Name: ${baselineEnvName}`);
242-
await eyes.open(projectName, testName, { width: design.width, height: design.height });
252+
await eyes.open(projectName, testName, { width: width, height: height });
243253
await eyes.check(testName, Target.image(Buffer.from(design.bytes)));
244254

245255
testResults = await eyes.close(false);

0 commit comments

Comments
 (0)