Startup settings: Completion popup should follow the anchor text field position.

Bug:
Open chrome://settings/startup, type someting in a URL text field to show an
autocompletion popup, then zoom page in/out by keyboard operation.

Expected behavior is just to zoom the page, and the autocompletion popup should
follow the anchor <input> position and width. Actual behavior was the popup was
detached from the anchor <input>.

Solution:
Call cr.ui.AutocompleteList.syncWidthAndPositionToInput() when the window is
resized, like HomePageOverlay does.
AutocompleteList always requires to listen 'resize' events. So we should do
addEventListener in AutocompleteList class.

BUG=304092

Review URL: https://codereview.chromium.org/103863002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@239161 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 19 insertions, 0 deletions

diff --git a/ui/webui/resources/js/cr/ui/autocomplete_list.js b/ui/webui/resources/js/cr/ui/autocomplete_list.js
index 6dd04f3..378e7c6 100644
--- a/ui/webui/resources/js/cr/ui/autocomplete_list.js
+++ b/ui/webui/resources/js/cr/ui/autocomplete_list.js
@@ -173,6 +173,14 @@ cr.define('cr.ui', function() {
 
       input.addEventListener('keydown', this.textFieldKeyHandler_, true);
       input.addEventListener('input', this.textFieldInputHandler_);
+
+      if (!this.boundSyncWidthAndPositionToInput_) {
+        this.boundSyncWidthAndPositionToInput_ =
+            this.syncWidthAndPositionToInput.bind(this);
+      }
+      // We need to call syncWidthAndPositionToInput whenever page zoom level or
+      // page size is changed.
+      window.addEventListener('resize', this.boundSyncWidthAndPositionToInput_);
     },
 
     /**
@@ -187,6 +195,10 @@ cr.define('cr.ui', function() {
       input.removeEventListener('input', this.textFieldInputHandler_);
       this.targetInput_ = null;
       this.suggestions = [];
+      if (this.boundSyncWidthAndPositionToInput_) {
+        window.removeEventListener(
+            'resize', this.boundSyncWidthAndPositionToInput_);
+      }
     },
 
     /**
@@ -203,6 +215,13 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * syncWidthAndPositionToInput function bound to |this|.
+     * @type {Function}
+     * @private
+     */
+    boundSyncWidthAndPositionToInput_: undefined,
+
+    /**
      * @return {HTMLElement} The text field the autocomplete popup is currently
      *     attached to, if any.
      */