Local NTP, Realbox: Stops filling realbox with the match below after delete

- Realbox input always gets focus after deleting a match.
- Selects the first match in the list after deletion and fills the realbox
  input with its content if it is allowed to be the default match.
  Otherwise sets the input to the user typed value.

Bug: 1018437
Change-Id: I02fd690a0c0acaa570f37604970c13391af14b63
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1881991
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#710634}

chrome/browser/resources/local_ntp/local_ntp.js

@@ -47,6 +47,9 @@ const AutocompleteResultStatus = {
   SKIPPED: 1,
 };
 
+/** @type {string} */
+let lastInput;
+
 /** @typedef {{inline: string, text: string}} */
 let RealboxOutput;
 
@@ -1072,39 +1075,35 @@ function onDeleteAutocompleteMatch(result) {
     return;
   }
 
-  const matchEls = Array.from($(IDS.REALBOX_MATCHES).children);
-  const selected = matchEls.findIndex(matchEl => {
-    return matchEl.classList.contains(CLASSES.SELECTED);
-  });
-
-  const wasFocused =
-      matchEls[selected] && matchEls[selected].contains(document.activeElement);
+  $(IDS.REALBOX).focus();
 
   populateAutocompleteMatches(result.matches);
 
   if (result.matches.length === 0) {
-    if (wasFocused) {
-      $(IDS.REALBOX).focus();
-    }
+    updateRealboxOutput({inline: '', text: ''});
     return;
   }
 
-  const newMatchEls = Array.from($(IDS.REALBOX_MATCHES).children);
-  const newSelected = Math.max(Math.min(newMatchEls.length - 1, selected), 0);
-  const newSelectedEl = newMatchEls[newSelected];
-
-  selectMatchEl(newSelectedEl);
-
-  if (wasFocused) {
-    const removeIcon = newSelectedEl.querySelector(`.${CLASSES.REMOVE_ICON}`);
-    assert(removeIcon || newSelectedEl).focus();
-  }
+  const firstMatch = autocompleteMatches[0];
+  if (firstMatch.allowedToBeDefaultMatch) {
+    const matchEls = Array.from($(IDS.REALBOX_MATCHES).children);
+    selectMatchEl(matchEls[0]);
 
+    const fill = firstMatch.fillIntoEdit;
+    const inline = firstMatch.inlineAutocompletion;
+    const textEnd = fill.length - inline.length;
+    updateRealboxOutput({
+      moveCursorToEnd: true,
+      inline: inline,
+      text: assert(fill.substr(0, textEnd)),
+    });
+  } else {
     updateRealboxOutput({
       moveCursorToEnd: true,
       inline: '',
-    text: assert(autocompleteMatches[newSelected].fillIntoEdit),
+      text: lastInput,
     });
+  }
 }
 
 /**
@@ -1208,7 +1207,7 @@ function onRealboxInput() {
   updateRealboxOutput({inline: '', text: realboxValue});
 
   if (realboxValue.trim()) {
-    window.chrome.embeddedSearch.searchBox.queryAutocomplete(realboxValue);
+    queryAutocomplete(realboxValue);
   } else {
     setRealboxMatchesVisible(false);
     setRealboxWrapperListenForKeydown(false);
@@ -1219,7 +1218,7 @@ function onRealboxInput() {
 /** @param {Event} e */
 function onRealboxWrapperFocusIn(e) {
   if (e.target.matches(`#${IDS.REALBOX}`) && !$(IDS.REALBOX).value) {
-    window.chrome.embeddedSearch.searchBox.queryAutocomplete('');
+    queryAutocomplete('');
   } else if (e.target.matches(`#${IDS.REALBOX_MATCHES} *`)) {
     let target = e.target;
     while (target && target.nodeName !== 'A') {
@@ -1274,7 +1273,7 @@ function onRealboxWrapperKeydown(e) {
         inline: lastOutput.inline.substr(1),
         text: assert(lastOutput.text + key),
       });
-      window.chrome.embeddedSearch.searchBox.queryAutocomplete(lastOutput.text);
+      queryAutocomplete(lastOutput.text);
       e.preventDefault();
       return;
     }
@@ -1528,6 +1527,14 @@ function populateAutocompleteMatches(matches) {
   setAutocompleteMatches(matches);
 }
 
+/**
+ * @param {string} input
+ */
+function queryAutocomplete(input) {
+  lastInput = input;
+  window.chrome.embeddedSearch.searchBox.queryAutocomplete(input);
+}
+
 /**
  * @param {!Element} element
  * @param {!Array<string>} keys

chrome/test/data/local_ntp/realbox_browsertest.js

@@ -111,6 +111,7 @@ test.realbox.setUp = function() {
       queryAutocomplete(query) {
         test.realbox.queries.push(query);
       },
+      stopAutocomplete(clearResult) {}
     },
   };
 
@@ -522,7 +523,7 @@ test.realbox.testUnsupportedDeletion = function() {
   assertFalse(matchesEl.classList.contains(test.realbox.CLASSES.REMOVABLE));
 };
 
-test.realbox.testSupportedDeletion = function() {
+test.realbox.testSupportedDeletionSelectNextMatch = function() {
   test.realbox.realboxEl.value = 'hello world';
   test.realbox.realboxEl.dispatchEvent(new CustomEvent('input'));
 
@@ -547,6 +548,7 @@ test.realbox.testSupportedDeletion = function() {
   assertEquals(2, matchesEl.children.length);
   assertTrue(
       matchesEl.children[1].classList.contains(test.realbox.CLASSES.SELECTED));
+  assertFalse(test.realbox.realboxEl.value === 'hello world');
 
   const shiftDelete = new KeyboardEvent('keydown', {
     bubbles: true,
@@ -563,12 +565,74 @@ test.realbox.testSupportedDeletion = function() {
   matchesEl.children[1].focus();
   assertEquals(matchesEl.children[1], document.activeElement);
 
-  chrome.embeddedSearch.searchBox.ondeleteautocompletematch(
-      {success: true, matches: [test.realbox.getSearchMatch()]});
+  chrome.embeddedSearch.searchBox.ondeleteautocompletematch({
+    success: true,
+    matches: [test.realbox.getSearchMatch({supportsDeletion: true})]
+  });
 
   const newMatchesEl = $(test.realbox.IDS.REALBOX_MATCHES);
   assertEquals(1, newMatchesEl.children.length);
-  assertEquals(newMatchesEl.children[0], document.activeElement);
+  assertTrue(newMatchesEl.children[0].classList.contains(
+      test.realbox.CLASSES.SELECTED));
+
+  assertEquals(test.realbox.realboxEl, document.activeElement);
+  assertEquals('hello world', test.realbox.realboxEl.value);
+};
+
+test.realbox.testSupportedDeletionDoNotSelectNextMatch = function() {
+  test.realbox.realboxEl.value = 'hello';
+  test.realbox.realboxEl.dispatchEvent(new CustomEvent('input'));
+
+  const matches = [
+    test.realbox.getUrlMatch({supportsDeletion: true}),
+    test.realbox.getSearchMatch({supportsDeletion: true}),
+  ];
+  chrome.embeddedSearch.searchBox.onqueryautocompletedone(
+      {input: test.realbox.realboxEl.value, matches});
+
+  const matchesEl = $(test.realbox.IDS.REALBOX_MATCHES);
+  assertTrue(matchesEl.classList.contains(test.realbox.CLASSES.REMOVABLE));
+
+  const downArrow = new KeyboardEvent('keydown', {
+    bubbles: true,
+    cancelable: true,
+    key: 'ArrowDown',
+  });
+  test.realbox.realboxEl.dispatchEvent(downArrow);
+  assertTrue(downArrow.defaultPrevented);
+
+  assertEquals(2, matchesEl.children.length);
+  assertTrue(
+      matchesEl.children[1].classList.contains(test.realbox.CLASSES.SELECTED));
+  assertEquals('hello world', test.realbox.realboxEl.value);
+
+  const shiftDelete = new KeyboardEvent('keydown', {
+    bubbles: true,
+    cancelable: true,
+    key: 'Delete',
+    shiftKey: true,
+  });
+  test.realbox.realboxEl.dispatchEvent(shiftDelete);
+  assertTrue(shiftDelete.defaultPrevented);
+
+  assertEquals(1, test.realbox.deletedLines.length);
+  assertEquals(1, test.realbox.deletedLines[0]);
+
+  matchesEl.children[1].focus();
+  assertEquals(matchesEl.children[1], document.activeElement);
+
+  chrome.embeddedSearch.searchBox.ondeleteautocompletematch({
+    success: true,
+    matches: [test.realbox.getSearchMatch({allowedToBeDefaultMatch: false})]
+  });
+
+  const newMatchesEl = $(test.realbox.IDS.REALBOX_MATCHES);
+  assertEquals(1, newMatchesEl.children.length);
+  assertFalse(newMatchesEl.children[0].classList.contains(
+      test.realbox.CLASSES.SELECTED));
+
+  assertEquals(test.realbox.realboxEl, document.activeElement);
+  assertEquals('hello', test.realbox.realboxEl.value);
 };
 
 test.realbox.testNonShiftDelete = function() {