Bug 1143742 - part3: multiline inplace-editor autocomplete behavior;r=gl
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 30 Mar 2016 22:58:41 +0200
changeset 291373 ce42e52ab208465ef8bd5cb48e2fc8e1abe09501
parent 291372 02c981b1fb557cda132abfc28ed2a92116871a50
child 291374 2fd5231609577f953a0e932ce297b0a8e109412a
push id19656
push usergwagner@mozilla.com
push dateMon, 04 Apr 2016 13:43:23 +0000
treeherderb2g-inbound@e99061fde28a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1143742
milestone48.0a1
Bug 1143742 - part3: multiline inplace-editor autocomplete behavior;r=gl The default inplace-editor autocomplete behavior is not userfriendly when combined with a multiline inplace-editor. Navigating up/down might trigger an autocomplete suggestion. Also, the autocomplete popup is not displayed at the correct position and should take the multiline into account. MozReview-Commit-ID: JTiCQ3HK5bn
devtools/client/shared/inplace-editor.js
--- a/devtools/client/shared/inplace-editor.js
+++ b/devtools/client/shared/inplace-editor.js
@@ -1321,32 +1321,43 @@ InplaceEditor.prototype = {
                                               startCheckQuery.length);
         this._updateSize();
       }
 
       // 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 offset = indent * this.inputCharWidth;
+        let offset = indent * this.inputCharDimensions.width;
+        offset = this._isSingleLine() ? offset : 0;
 
         // Select the most relevantItem if autoInsert is allowed
         let selectedIndex = autoInsert ? mostRelevantIndex : -1;
 
         // Open the suggestions popup.
         this.popup.setItems(finalList);
         this.popup.openPopup(this.input, offset, 0, selectedIndex);
       } else {
         this.popup.hidePopup();
       }
       // This emit is mainly for the purpose of making the test flow simpler.
       this.emit("after-suggest");
       this._doValidation();
     }, 0);
   },
+
+  /**
+   * Check if the current input is displaying more than one line of text.
+   *
+   * @return {Boolean} true if the input has a single line of text
+   */
+  _isSingleLine: function() {
+    let inputRect = this.input.getBoundingClientRect();
+    return inputRect.height < 2 * this.inputCharDimensions.height;
+  },
 };
 
 /**
  * Copy text-related styles from one element to another.
  */
 function copyTextStyles(from, to) {
   let win = from.ownerDocument.defaultView;
   let style = win.getComputedStyle(from);