Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

Commit e245c05

Browse files
jasonLasterjasonLaster
committed
Document preview (#5830)
1 parent 98549fb commit e245c05

File tree

6 files changed

+163
-57
lines changed

6 files changed

+163
-57
lines changed

‎src/test/mochitest/browser.ini‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ support-files =
101101
examples/big-sourcemap.html
102102
examples/doc-minified2.html
103103
examples/doc-on-load.html
104+
examples/doc-preview.html
104105
examples/doc-sourcemaps.html
105106
examples/doc-sourcemaps2.html
106107
examples/doc-sourcemaps3.html
@@ -120,6 +121,7 @@ support-files =
120121
examples/top-level.js
121122
examples/opts.js
122123
examples/output.js
124+
examples/preview.js
123125
examples/simple1.js
124126
examples/simple2.js
125127
examples/simple3.js

‎src/test/mochitest/browser_dbg-preview-module.js‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,14 @@ add_task(async function() {
1313
await waitForSelectedSource(dbg, "top-level.js");
1414
await waitForPaused(dbg);
1515

16-
const popupPreviewed = waitForDispatch(dbg, "SET_PREVIEW");
17-
hoverAtPos(dbg, { line: 1, ch: 6 });
18-
await popupPreviewed;
19-
await assertPreviewPopup(dbg, {
20-
field: "foo",
21-
value: "1",
22-
expression: "obj"
23-
});
24-
await assertPreviewPopup(dbg, {
25-
field: "bar",
26-
value: "2",
27-
expression: "obj"
28-
});
29-
30-
// hover over an empty position so that the popup closes
31-
hoverAtPos(dbg, { line: 1, ch: 40 });
16+
await assertPreviews(dbg, [
17+
{
18+
line: 1,
19+
column: 6,
20+
expression: "obj",
21+
fields: [["foo", "1"], ["bar", "2"]]
22+
}
23+
]);
3224

3325
const tooltipPreviewed = waitForDispatch(dbg, "SET_PREVIEW");
3426
hoverAtPos(dbg, { line: 2, ch: 7 });

‎src/test/mochitest/browser_dbg-preview.js‎

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,74 @@
11
/* Any copyright is dedicated to the Public Domain.
22
* http://creativecommons.org/publicdomain/zero/1.0/ */
33

4+
//
5+
// async function assertPreviews(dbg, previews) {
6+
// for (const { line, column, expression, result, fields } of previews) {
7+
// hoverAtPos(dbg, { line, ch: column - 1 });
8+
//
9+
// if (fields && result) {
10+
// throw new Error("Invalid test fixture");
11+
// }
12+
//
13+
// if (fields) {
14+
// for (const [field, value] of fields) {
15+
// await assertPreviewPopup(dbg, { expression, field, value });
16+
// }
17+
// } else {
18+
// await assertPreviewTextValue(dbg, { expression, text: result });
19+
// }
20+
//
21+
// // Move to column 0 after to make sure that the preview created by this
22+
// // test does not affect later attempts to hover and preview.
23+
// hoverAtPos(dbg, { line: line - 1, ch: 0 });
24+
// }
25+
// }
26+
27+
async function previews(dbg, fnName, previews) {
28+
const invokeResult = invokeInTab(fnName);
29+
await waitForPaused(dbg);
30+
31+
await assertPreviews(dbg, previews);
32+
await resume(dbg);
33+
34+
info(`Ran tests for ${fnName}`);
35+
}
36+
437
// Test hovering on an object, which will show a popup and on a
538
// simple value, which will show a tooltip.
639
add_task(async function() {
7-
const dbg = await initDebugger("doc-scripts.html");
8-
const { selectors: { getSelectedSource }, getState } = dbg;
9-
const simple3 = findSource(dbg, "simple3.js");
10-
11-
await selectSource(dbg, "simple3");
40+
const dbg = await initDebugger("doc-preview.html");
41+
await selectSource(dbg, "preview.js");
1242

13-
await addBreakpoint(dbg, simple3, 5);
43+
await previews(dbg, "empties", [
44+
{ line: 2, column: 9, expression: "a", result: '""' },
45+
{ line: 3, column: 9, expression: "b", result: "false" },
46+
{ line: 4, column: 9, expression: "c", result: "undefined" },
47+
{ line: 5, column: 9, expression: "d", result: "null" }
48+
]);
1449

15-
invokeInTab("simple");
16-
await waitForPaused(dbg);
50+
await previews(dbg, "smalls", [
51+
{ line: 10, column: 9, expression: "a", result: '"..."' },
52+
{ line: 11, column: 9, expression: "b", result: "true" },
53+
{ line: 12, column: 9, expression: "c", result: "1" },
54+
{
55+
line: 13,
56+
column: 9,
57+
expression: "d",
58+
fields: [["length", "0"]]
59+
}
60+
// { line: 14, column: 9, expression: "e", result: 'null'},
61+
]);
1762

18-
const tooltipPreviewed = waitForDispatch(dbg, "SET_PREVIEW");
19-
hoverAtPos(dbg, { line: 5, ch: 12 });
20-
await tooltipPreviewed;
21-
await assertPreviewTooltip(dbg, { result: "3", expression: "result" });
22-
23-
const popupPreviewed = waitForDispatch(dbg, "SET_PREVIEW");
24-
hoverAtPos(dbg, { line: 2, ch: 10 });
25-
await popupPreviewed;
26-
await assertPreviewPopup(dbg, {
27-
field: "foo",
28-
value: "1",
29-
expression: "obj"
30-
});
31-
await assertPreviewPopup(dbg, {
32-
field: "bar",
33-
value: "2",
34-
expression: "obj"
35-
});
63+
//
64+
//
65+
// x = {
66+
// line: 35,
67+
// column: 20,
68+
// expression: "b",
69+
// fields: [
70+
// ['aNamed', 'a-named2'],
71+
// ['default', 'a-default2'],
72+
// ],
73+
// }
3674
});

‎src/test/mochitest/examples/doc-preview.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!-- This Source Code Form is subject to the terms of the Mozilla Public
2+
- License, v. 2.0. If a copy of the MPL was not distributed with this
3+
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="utf-8"/>
8+
<title>Debugger Preview</title>
9+
</head>
10+
11+
<body>
12+
<script src="preview.js"></script>
13+
<script>
14+
// This inline script allows this HTML page to show up as a
15+
// source. It also needs to introduce a new global variable so
16+
// it's not immediately garbage collected.
17+
inline_script = function () { var x = 5; };
18+
</script>
19+
</body>
20+
</html>

‎src/test/mochitest/examples/preview.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
function empties() {
2+
const a = "";
3+
const b = false;
4+
const c = undefined;
5+
const d = null;
6+
debugger;
7+
}
8+
9+
function smalls() {
10+
const a = "...";
11+
const b = true;
12+
const c = 1;
13+
const d = [];
14+
const e = {};
15+
debugger;
16+
}
17+
18+
function objects() {
19+
const obj = {
20+
foo: 1
21+
};
22+
23+
debugger;
24+
}

‎src/test/mochitest/head.js‎

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ function waitForState(dbg, predicate, msg) {
177177
}
178178

179179
const unsubscribe = dbg.store.subscribe(() => {
180-
const result = predicate(dbg.store.getState())
180+
const result = predicate(dbg.store.getState());
181181
if (result) {
182182
info(`Finished waiting for state change: ${msg || ""}`);
183183
unsubscribe();
@@ -228,10 +228,14 @@ async function waitForSources(dbg, ...sources) {
228228
* @static
229229
*/
230230
function waitForSource(dbg, url) {
231-
return waitForState(dbg, state => {
232-
const sources = dbg.selectors.getSources(state);
233-
return sources.find(s => (s.get("url") || "").includes(url));
234-
}, `source exists`);
231+
return waitForState(
232+
dbg,
233+
state => {
234+
const sources = dbg.selectors.getSources(state);
235+
return sources.find(s => (s.get("url") || "").includes(url));
236+
},
237+
`source exists`
238+
);
235239
}
236240

237241
async function waitForElement(dbg, name) {
@@ -265,7 +269,10 @@ function waitForSelectedSource(dbg, url) {
265269

266270
// wait for async work to be done
267271
const hasSymbols = dbg.selectors.hasSymbols(state, source);
268-
const hasSourceMetaData = dbg.selectors.hasSourceMetaData(state, source.id);
272+
const hasSourceMetaData = dbg.selectors.hasSourceMetaData(
273+
state,
274+
source.id
275+
);
269276
const hasPausePoints = dbg.selectors.hasPausePoints(state, source.id);
270277
return hasSymbols && hasSourceMetaData && hasPausePoints;
271278
},
@@ -689,8 +696,8 @@ function deleteExpression(dbg, input) {
689696
* @static
690697
*/
691698
async function reload(dbg, ...sources) {
692-
const navigated = waitForDispatch(dbg, "NAVIGATE")
693-
await dbg.client.reload()
699+
const navigated = waitForDispatch(dbg, "NAVIGATE");
700+
await dbg.client.reload();
694701
await navigated;
695702
return waitForSources(dbg, ...sources);
696703
}
@@ -1114,12 +1121,13 @@ function getCoordsFromPosition(cm, { line, ch }) {
11141121
}
11151122

11161123
function hoverAtPos(dbg, { line, ch }) {
1124+
info(`Hovering at ${line}, ${ch}`);
11171125
const cm = getCM(dbg);
11181126

11191127
// Ensure the line is visible with margin because the bar at the bottom of
11201128
// the editor overlaps into what the editor things is its own space, blocking
11211129
// the click event below.
1122-
cm.scrollIntoView({ line: line - 1, ch }, 100);
1130+
cm.scrollIntoView({ line: line - 1, ch }, 100);
11231131

11241132
const coords = getCoordsFromPosition(cm, { line: line - 1, ch });
11251133
const tokenEl = dbg.win.document.elementFromPoint(coords.left, coords.top);
@@ -1133,7 +1141,7 @@ function hoverAtPos(dbg, { line, ch }) {
11331141
}
11341142

11351143
async function assertPreviewTextValue(dbg, { text, expression }) {
1136-
const previewEl = await waitForElement(dbg, "previewPopup");;
1144+
const previewEl = await waitForElement(dbg, "previewPopup");
11371145

11381146
is(previewEl.innerText, text, "Preview text shown to user");
11391147

@@ -1156,15 +1164,37 @@ async function assertPreviewPopup(dbg, { field, value, expression }) {
11561164
const previewEl = await waitForElement(dbg, "popup");
11571165
const preview = dbg.selectors.getPreview(dbg.getState());
11581166

1159-
is(
1160-
`${preview.result.preview.ownProperties[field].value}`,
1161-
value,
1162-
"Preview.result"
1163-
);
1167+
const properties =
1168+
preview.result.preview.ownProperties || preview.result.preview.items;
1169+
const property = properties[field];
1170+
1171+
is(`${property.value || property}`, value, "Preview.result");
11641172
is(preview.updating, false, "Preview.updating");
11651173
is(preview.expression, expression, "Preview.expression");
11661174
}
11671175

1176+
async function assertPreviews(dbg, previews) {
1177+
for (const { line, column, expression, result, fields } of previews) {
1178+
hoverAtPos(dbg, { line, ch: column - 1 });
1179+
1180+
if (fields && result) {
1181+
throw new Error("Invalid test fixture");
1182+
}
1183+
1184+
if (fields) {
1185+
for (const [field, value] of fields) {
1186+
await assertPreviewPopup(dbg, { expression, field, value });
1187+
}
1188+
} else {
1189+
await assertPreviewTextValue(dbg, { expression, text: result });
1190+
}
1191+
1192+
// Move to column 0 after to make sure that the preview created by this
1193+
// test does not affect later attempts to hover and preview.
1194+
hoverAtPos(dbg, { line: line, ch: 0 });
1195+
}
1196+
}
1197+
11681198
// NOTE: still experimental, the screenshots might not be exactly correct
11691199
async function takeScreenshot(dbg) {
11701200
let canvas = dbg.win.document.createElementNS(

0 commit comments

Comments
 (0)