Bug 1485990 - Display 1-item-only autocomplete popup if autocompletion text can't be displayed; r=bgrins.

If the autocomplete only returns 1 item, we usually close the
popup and show the autocompletion text.
But in some cases the autocompletion text can't be shown (e.g.
there's some text after the cursor). So we end up showing
nothing for the user, which is not ideal.
In such case, this patch ensures we do show the popup so the
user can autocomplete and save some keystrokes.

Depends on D4061

Differential Revision: https://phabricator.services.mozilla.com/D4335

--HG--
extra : moz-landing-system : lando

devtools/client/webconsole/components/JSTerm.js

@@ -1180,9 +1180,16 @@ class JSTerm extends Component {
     // - there are at least 2 matching results
     // - OR, if there's 1 result, but whose label does not start like the input (this can
     //   happen with insensitive search: `num` will match `Number`).
-    if (items.length >= minimumAutoCompleteLength || (
-      items.length === 1 && items[0].preLabel !== matchProp
-    )) {
+    // - OR, if there's 1 result, but we can't show the completionText (because there's
+    // some text after the cursor), unless the text in the popup is the same as the input.
+    if (items.length >= minimumAutoCompleteLength
+      || (items.length === 1 && items[0].preLabel !== matchProp)
+      || (
+        items.length === 1
+        && !this.canDisplayAutoCompletionText()
+        && items[0].label !== matchProp
+      )
+    ) {
       let popupAlignElement;
       let xOffset;
       let yOffset;

devtools/client/webconsole/test/mochitest/browser_jsterm_autocomplete_inside_text.js

@@ -49,9 +49,7 @@ async function performTests() {
   EventUtils.synthesizeKey("KEY_ArrowRight");
   await onPopupClose;
   ok(true, "popup was closed");
-  let expectedInput = "dump(window.testB)";
-  is(jsterm.getInputValue(), expectedInput, "input wasn't modified");
-  checkJsTermCursor(jsterm, expectedInput.length, "cursor was moved to the right");
+  checkJsTermValueAndCursor(jsterm, "dump(window.testB)|", "input wasn't modified");
 
   await setInitialState(jsterm);
   EventUtils.synthesizeKey("KEY_ArrowDown");
@@ -69,9 +67,8 @@ async function performTests() {
 
   // At this point the completion suggestion should be accepted.
   ok(!popup.isOpen, "popup is not open");
-  expectedInput = "dump(window.testBugBB)";
-  is(jsterm.getInputValue(), expectedInput, "completion was successful after VK_TAB");
-  checkJsTermCursor(jsterm, expectedInput.length - 1, "cursor location is correct");
+  checkJsTermValueAndCursor(jsterm, "dump(window.testBugBB|)",
+    "completion was successful after VK_TAB");
   ok(!getJsTermCompletionValue(jsterm), "there is no completion text");
 
   info("Test ENTER key when popup is visible with a selected item");
@@ -82,33 +79,40 @@ async function performTests() {
   await onPopupClose;
 
   ok(!popup.isOpen, "popup is not open");
-  expectedInput = "dump(window.testBugAA)";
-  is(jsterm.getInputValue(), expectedInput, "completion was successful after Enter");
-  checkJsTermCursor(jsterm, expectedInput.length - 1, "cursor location is correct");
+  checkJsTermValueAndCursor(jsterm, "dump(window.testBugAA|)",
+    "completion was successful after Enter");
   ok(!getJsTermCompletionValue(jsterm), "there is no completion text");
 
-  info("Test TAB key when there is no autocomplete suggestion");
+  info("Test autocomplete inside parens");
   jsterm.setInputValue("dump()");
   EventUtils.synthesizeKey("KEY_ArrowLeft");
   const onAutocompleteUpdated = jsterm.once("autocomplete-updated");
   EventUtils.sendString("window.testBugA");
   await onAutocompleteUpdated;
+  ok(popup.isOpen, "popup is open");
+  ok(!getJsTermCompletionValue(jsterm), "there is no completion text");
+
+  info("Matching the completion proposal should close the popup");
+  onPopupClose = popup.once("popup-closed");
+  EventUtils.sendString("A");
+  await onPopupClose;
+
+  info("Test TAB key when there is no autocomplete suggestion");
   ok(!popup.isOpen, "popup is not open");
   ok(!getJsTermCompletionValue(jsterm), "there is no completion text");
 
   EventUtils.synthesizeKey("KEY_Tab");
-
-  expectedInput = "dump(window.testBugAA)";
-  is(jsterm.getInputValue(), "dump(window.testBugA\t)", "Tab inserted a tab char");
-  checkJsTermCursor(jsterm, expectedInput.length - 1, "cursor location is correct");
+  checkJsTermValueAndCursor(jsterm, "dump(window.testBugAA\t|)",
+    "completion was successful after Enter");
 }
 
-function setInitialState(jsterm) {
+async function setInitialState(jsterm) {
   jsterm.focus();
   jsterm.setInputValue("dump()");
   EventUtils.synthesizeKey("KEY_ArrowLeft");
 
   const onPopUpOpen = jsterm.autocompletePopup.once("popup-opened");
   EventUtils.sendString("window.testB");
-  return onPopUpOpen;
+  checkJsTermValueAndCursor(jsterm, "dump(window.testB|)");
+  await onPopUpOpen;
 }