Bug 1294366 - Fix filter widget select opening only once, force focus on window on click. r=ochameau, a=ritu
authorJulian Descottes <jdescottes@mozilla.com>
Mon, 22 Aug 2016 17:55:12 +0200
changeset 348131 8fe577bafb7837433a3d88515baf0c4155dadf90
parent 348130 0c2347afecab58733a57e88fae039df838f78c54
child 348132 41184c8c63b17e62605e0f9840d8e3350ac2275a
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersochameau, ritu
bugs1294366
milestone50.0a2
Bug 1294366 - Fix filter widget select opening only once, force focus on window on click. r=ochameau, a=ritu MozReview-Commit-ID: 5xcZuoRxOco
devtools/client/shared/widgets/FilterWidget.js
--- a/devtools/client/shared/widgets/FilterWidget.js
+++ b/devtools/client/shared/widgets/FilterWidget.js
@@ -127,16 +127,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();
@@ -275,16 +276,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);
@@ -294,16 +296,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);
@@ -605,16 +608,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");