Bug 1349701 - Update the styles of <select> popups on focus. r=mossop

This patch also fixes a bug in our UpdateDropDown code where we weren't computing updated styles for <select> element, as well as another bug where we weren't passing the correct number of arguments to this.populate.

MozReview-Commit-ID: 8LAeIliRXhZ

--HG--
extra : rebase_source : 19c573ffebf700de4b4a470ceb1d2706a8088574
This commit is contained in:
Jared Wein 2017-03-23 13:34:21 -04:00
Родитель 19fe5b6be4
Коммит e8d13f3103
3 изменённых файлов: 31 добавлений и 0 удалений

Просмотреть файл

@ -91,6 +91,15 @@ const DISABLED_OPTGROUP_AND_OPTIONS =
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>";
const SELECT_CHANGES_COLOR_ON_FOCUS =
"<html><head><style>" +
" select:focus { background-color: orange; color: black; }" +
"</style></head>" +
"<body><select id='one'>" +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>";
function getSystemColor(color) {
// Need to convert system color to RGB color.
let textarea = document.createElementNS("http://www.w3.org/1999/xhtml", "textarea");
@ -279,3 +288,12 @@ add_task(function* test_disabled_optgroup_and_options() {
yield testSelectColors(DISABLED_OPTGROUP_AND_OPTIONS, 17,
{skipSelectColorTest: true});
});
add_task(function* test_disabled_optgroup_and_options() {
let options = {
selectColor: "rgb(0, 0, 0)",
selectBgColor: "rgb(255, 165, 0)"
};
yield testSelectColors(SELECT_CHANGES_COLOR_ON_FOCUS, 2, options);
});

Просмотреть файл

@ -94,9 +94,11 @@ this.SelectContentHelper.prototype = {
showDropDown() {
this.element.openInParentProcess = true;
let rect = this._getBoundingContentRect();
DOMUtils.addPseudoClassLock(this.element, ":focus");
let computedStyles = getComputedStyles(this.element);
this._selectBackgroundColor = computedStyles.backgroundColor;
this._selectColor = computedStyles.color;
DOMUtils.clearPseudoClassLocks(this.element);
this.global.sendAsyncMessage("Forms:ShowDropDown", {
direction: computedStyles.direction,
isOpenedViaTouch: this.isOpenedViaTouch,
@ -124,6 +126,14 @@ this.SelectContentHelper.prototype = {
_update() {
// The <select> was updated while the dropdown was open.
// Let's send up a new list of options.
// Technically we might not need to set this pseudo-class
// during _update() since the element should organically
// have :focus, though it is here for belt-and-suspenders.
DOMUtils.addPseudoClassLock(this.element, ":focus");
let computedStyles = getComputedStyles(this.element);
this._selectBackgroundColor = computedStyles.backgroundColor;
this._selectColor = computedStyles.color;
DOMUtils.clearPseudoClassLocks(this.element);
this.global.sendAsyncMessage("Forms:UpdateDropDown", {
options: this._buildOptionList(),
selectedIndex: this.element.selectedIndex,

Просмотреть файл

@ -192,10 +192,13 @@ this.SelectParentHelper = {
let selectedIndex = msg.data.selectedIndex;
let uaBackgroundColor = msg.data.uaBackgroundColor;
let uaColor = msg.data.uaColor;
let uaSelectBackgroundColor = msg.data.uaSelectBackgroundColor;
let uaSelectColor = msg.data.uaSelectColor;
let selectBackgroundColor = msg.data.selectBackgroundColor;
let selectColor = msg.data.selectColor;
this.populate(currentMenulist, options, selectedIndex,
currentZoom, uaBackgroundColor, uaColor,
uaSelectBackgroundColor, uaSelectColor,
selectBackgroundColor, selectColor);
}
},