Bug 1294366 - fix filter widget select opening only once, force focus on window on click;r=ochameau
MozReview-Commit-ID: 5xcZuoRxOco
--- a/devtools/client/shared/widgets/FilterWidget.js
+++ b/devtools/client/shared/widgets/FilterWidget.js
@@ -126,16 +126,17 @@ function CSSFilterEditorWidget(el, value
this._mouseMove = this._mouseMove.bind(this);
this._mouseUp = this._mouseUp.bind(this);
this._mouseDown = this._mouseDown.bind(this);
this._keyDown = this._keyDown.bind(this);
this._input = this._input.bind(this);
this._presetClick = this._presetClick.bind(this);
this._savePreset = this._savePreset.bind(this);
this._togglePresets = this._togglePresets.bind(this);
+ this._resetFocus = this._resetFocus.bind(this);
// Passed to asyncStorage, requires binding
this.renderPresets = this.renderPresets.bind(this);
this._initMarkup();
this._buildFilterItemMarkup();
this._buildPresetItemMarkup();
this._addEventListeners();
@@ -274,16 +275,17 @@ CSSFilterEditorWidget.prototype = {
},
_addEventListeners: function () {
this.addButton = this.el.querySelector("#add-filter");
this.addButton.addEventListener("click", this._addButtonClick);
this.filtersList.addEventListener("click", this._removeButtonClick);
this.filtersList.addEventListener("mousedown", this._mouseDown);
this.filtersList.addEventListener("keydown", this._keyDown);
+ this.el.addEventListener("mousedown", this._resetFocus);
this.presetsList.addEventListener("click", this._presetClick);
this.togglePresets.addEventListener("click", this._togglePresets);
this.addPresetButton.addEventListener("click", this._savePreset);
// These events are event delegators for
// drag-drop re-ordering and label-dragging
this.win.addEventListener("mousemove", this._mouseMove);
@@ -293,16 +295,17 @@ CSSFilterEditorWidget.prototype = {
this.filtersList.addEventListener("input", this._input);
},
_removeEventListeners: function () {
this.addButton.removeEventListener("click", this._addButtonClick);
this.filtersList.removeEventListener("click", this._removeButtonClick);
this.filtersList.removeEventListener("mousedown", this._mouseDown);
this.filtersList.removeEventListener("keydown", this._keyDown);
+ this.el.removeEventListener("mousedown", this._resetFocus);
this.presetsList.removeEventListener("click", this._presetClick);
this.togglePresets.removeEventListener("click", this._togglePresets);
this.addPresetButton.removeEventListener("click", this._savePreset);
// These events are used for drag drop re-ordering
this.win.removeEventListener("mousemove", this._mouseMove);
this.win.removeEventListener("mouseup", this._mouseUp);
@@ -604,16 +607,24 @@ CSSFilterEditorWidget.prototype = {
}
this.setPresets(presets).then(this.renderPresets,
ex => console.error(ex));
}, ex => console.error(ex));
},
/**
+ * Workaround needed to reset the focus when using a HTML select inside a XUL panel.
+ * See Bug 1294366.
+ */
+ _resetFocus: function () {
+ this.filterSelect.ownerDocument.defaultView.focus();
+ },
+
+ /**
* Clears the list and renders filters, binding required events.
* There are some delegated events bound in _addEventListeners method
*/
render: function () {
if (!this.filters.length) {
this.filtersList.innerHTML = `<p> ${L10N.getStr("emptyFilterList")} <br />
${L10N.getStr("addUsingList")} </p>`;
this.emit("render");