mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-12 04:45:45 +00:00
Bug 1270494 - fix autocomplete popup offset for multiple values input;r=pbro
Fixed regression from Bug 1168246 and added a unit test to loosely check that the autocomplete popup moves along with autocompleted query. MozReview-Commit-ID: H7t5WjkwBE4 --HG-- extra : rebase_source : d876338475ee1b1ae7ef30a9da8bea24c775c948
This commit is contained in:
parent
22e7cd6527
commit
724f434327
@ -1431,7 +1431,7 @@ InplaceEditor.prototype = {
|
||||
// Display the list of suggestions if there are more than one.
|
||||
if (finalList.length > 1) {
|
||||
// Calculate the popup horizontal offset.
|
||||
let indent = this.input.selectionStart - query.length;
|
||||
let indent = this.input.selectionStart - startCheckQuery.length;
|
||||
let offset = indent * this.inputCharDimensions.width;
|
||||
offset = this._isSingleLine() ? offset : 0;
|
||||
|
||||
|
@ -124,6 +124,7 @@ skip-if = e10s # Bug 1221911, bug 1222289, frequent e10s timeouts
|
||||
[browser_inplace-editor-02.js]
|
||||
[browser_inplace-editor_autocomplete_01.js]
|
||||
[browser_inplace-editor_autocomplete_02.js]
|
||||
[browser_inplace-editor_autocomplete_offset.js]
|
||||
[browser_inplace-editor_maxwidth.js]
|
||||
[browser_key_shortcuts.js]
|
||||
[browser_layoutHelpers.js]
|
||||
|
@ -13,6 +13,13 @@ loadHelperScript("helper_inplace_editor.js");
|
||||
// Using a mocked list of CSS properties to avoid test failures linked to
|
||||
// engine changes (new property, removed property, ...).
|
||||
|
||||
// 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),
|
||||
// ]
|
||||
const testData = [
|
||||
["b", "border", 1, 3],
|
||||
["VK_DOWN", "box-sizing", 2, 3],
|
||||
|
@ -13,6 +13,13 @@ loadHelperScript("helper_inplace_editor.js");
|
||||
// Using a mocked list of CSS properties to avoid test failures linked to
|
||||
// engine changes (new property, removed property, ...).
|
||||
|
||||
// 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),
|
||||
// ]
|
||||
const testData = [
|
||||
["b", "block", -1, 0],
|
||||
["VK_BACK_SPACE", "b", -1, 0],
|
||||
|
@ -0,0 +1,111 @@
|
||||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* 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 { InplaceEditor } = require("devtools/client/shared/inplace-editor");
|
||||
const { AutocompletePopup } = require("devtools/client/shared/autocomplete-popup");
|
||||
loadHelperScript("helper_inplace_editor.js");
|
||||
|
||||
// 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 mockGetCSSPropertyList = function () {
|
||||
return [
|
||||
"clear",
|
||||
"color",
|
||||
"direction",
|
||||
"display",
|
||||
];
|
||||
};
|
||||
|
||||
const mockGetCSSValuesForPropertyName = function (propertyName) {
|
||||
let values = {
|
||||
"color": ["blue", "red"],
|
||||
"display": ["block", "flex", "none"]
|
||||
};
|
||||
return values[propertyName] || [];
|
||||
};
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab("data:text/html;charset=utf-8,inplace editor CSS value autocomplete");
|
||||
let [host, win, doc] = yield createHost();
|
||||
|
||||
let xulDocument = win.top.document;
|
||||
let popup = new AutocompletePopup(xulDocument, { autoSelect: true });
|
||||
|
||||
info("Create a CSS_MIXED type autocomplete");
|
||||
yield new Promise(resolve => {
|
||||
createInplaceEditorAndClick({
|
||||
initial: "style=",
|
||||
start: runAutocompletionTest,
|
||||
contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
|
||||
done: resolve,
|
||||
popup: popup
|
||||
}, doc);
|
||||
});
|
||||
|
||||
host.destroy();
|
||||
gBrowser.removeCurrentTab();
|
||||
});
|
||||
|
||||
let runAutocompletionTest = Task.async(function* (editor) {
|
||||
info("Starting autocomplete test for inplace-editor popup offset");
|
||||
editor._getCSSPropertyList = mockGetCSSPropertyList;
|
||||
editor._getCSSValuesForPropertyName = mockGetCSSValuesForPropertyName;
|
||||
|
||||
let previousOffset = -1;
|
||||
for (let 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.
|
||||
let offset = getPopupOffset(editor);
|
||||
ok(offset > previousOffset, "New popup offset is greater than the previous one");
|
||||
previousOffset = offset;
|
||||
} else {
|
||||
yield 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}) {
|
||||
let popupQuads = popup._panel.getBoxQuads({relativeTo: input});
|
||||
return popupQuads[0].bounds.left;
|
||||
}
|
Loading…
Reference in New Issue
Block a user