1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/* import-globals-from helper_inplace_editor.js */
"use strict";
const AutocompletePopup = require("resource://devtools/client/shared/autocomplete-popup.js");
const {
InplaceEditor,
} = require("resource://devtools/client/shared/inplace-editor.js");
loadHelperScript("helper_inplace_editor.js");
const TEST_URI =
CHROME_URL_ROOT + "doc_inplace-editor_autocomplete_offset.xhtml";
// Test the inplace-editor autocomplete popup is aligned with the completed query.
// Which means when completing "style=display:flex; color:" the popup will aim to be
// aligned with the ":" next to "color".
// format :
// [
// what key to press,
// expected input box value after keypress,
// selected suggestion index (-1 if popup is hidden),
// number of suggestions in the popup (0 if popup is hidden),
// ]
// or
// ["checkPopupOffset"]
// to measure and test the autocomplete popup left offset.
const testData = [
["VK_RIGHT", "style=", -1, 0],
["d", "style=display", 1, 2],
["checkPopupOffset"],
["VK_RIGHT", "style=display", -1, 0],
[":", "style=display:block", 0, 3],
["checkPopupOffset"],
["f", "style=display:flex", -1, 0],
["VK_RIGHT", "style=display:flex", -1, 0],
[";", "style=display:flex;", -1, 0],
["c", "style=display:flex;color", 1, 2],
["checkPopupOffset"],
["VK_RIGHT", "style=display:flex;color", -1, 0],
[":", "style=display:flex;color:blue", 0, 2],
["checkPopupOffset"],
];
const mockValues = {
clear: [],
color: ["blue", "red"],
direction: [],
display: ["block", "flex", "none"],
};
add_task(async function () {
await addTab(
"data:text/html;charset=utf-8,inplace editor CSS value autocomplete"
);
const { host, doc } = await createHost("bottom", TEST_URI);
const popup = new AutocompletePopup(doc, { autoSelect: true });
info("Create a CSS_MIXED type autocomplete");
await new Promise(resolve => {
createInplaceEditorAndClick(
{
initial: "style=",
start: runAutocompletionTest,
contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
done: resolve,
popup,
cssProperties: {
getNames: () => Object.keys(mockValues),
getValues: propertyName => mockValues[propertyName] || [],
},
},
doc
);
});
popup.destroy();
host.destroy();
gBrowser.removeCurrentTab();
});
const runAutocompletionTest = async function (editor) {
info("Starting autocomplete test for inplace-editor popup offset");
let previousOffset = -1;
for (const data of testData) {
if (data[0] === "checkPopupOffset") {
info("Check the popup offset has been modified");
// We are not testing hard coded offset values here, which could be fragile. We only
// want to ensure the popup tries to match the position of the query in the editor
// input.
const offset = getPopupOffset(editor);
Assert.greater(
offset,
previousOffset,
"New popup offset is greater than the previous one"
);
previousOffset = offset;
} else {
await testCompletion(data, editor);
}
}
EventUtils.synthesizeKey("VK_RETURN", {}, editor.input.defaultView);
};
/**
* Get the autocomplete panel left offset, relative to the provided input's left offset.
*/
function getPopupOffset({ popup, input }) {
const popupQuads = popup._panel.getBoxQuads({ relativeTo: input });
return popupQuads[0].getBounds().left;
}
|
