Bug 1294366 - fix filter widget select opening only once, force focus on window on click;r=ochameau draft
authorJulian Descottes <jdescottes@mozilla.com>
Mon, 22 Aug 2016 17:55:12 +0200
changeset 404019 e755310f51db2bde134a8cb6aebcb06fdd7a16f4
parent 403834 662270014cb72f82af415385f2f0bef5b135ec04
child 529060 4dfc59384c077a9f0ccfd7d712bb6c1d2d7007d8
push id27075
push userjdescottes@mozilla.com
push dateMon, 22 Aug 2016 16:31:47 +0000
reviewersochameau
bugs1294366
milestone51.0a1
Bug 1294366 - fix filter widget select opening only once, force focus on window on click;r=ochameau MozReview-Commit-ID: 5xcZuoRxOco
devtools/client/shared/widgets/FilterWidget.js
--- 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");