[OsSettingsSearch] Highlight query on mousedown and pointer cursor

* On mousedown, the search input will highlight the entire query text.
* When the dropdown is closed, hovering over the search input
  causes a pointer cursor instead of the text cursor.

Video:
https://drive.google.com/file/d/1Ytl8MLiZ7Q0JY05Y5421NjvKs7HMaiqf/view

Fixed: 1086774
Change-Id: I9d2b9e938d425b78c29b57f515b7b80fd6f56ce8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2219010Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#773282}

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_settings_search_box.html

@@ -60,6 +60,10 @@
         margin-top: var(--separator-height);
       }
 
+      :host(:not([should-show-dropdown_])) cr-toolbar-search-field {
+        --cr-toolbar-search-field-cursor: pointer;
+      };
+
       :host(:focus-within) cr-toolbar-search-field {
         box-shadow: var(--cr-menu-shadow);
       }

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_settings_search_box.js

@@ -109,6 +109,8 @@ Polymer({
     const searchInput = toolbarSearchField.getSearchInput();
     searchInput.addEventListener(
         'focus', this.onSearchInputFocused_.bind(this));
+    searchInput.addEventListener(
+        'mousedown', this.onSearchInputMousedown_.bind(this));
 
     // If the search was initiated by directly entering a search URL, need to
     // sync the URL parameter to the textbox.
@@ -224,6 +226,22 @@ Polymer({
     this.fetchSearchResults_();
   },
 
+  /* @private */
+  onSearchInputMousedown_() {
+    // If the search input is clicked while the dropdown is closed, and there
+    // already contains input text from a previous query, highlight the entire
+    // query text so that the user can choose to easily replace the query
+    // instead of having to delete the previous query manually. A mousedown
+    // event is used because it is captured before |shouldShowDropdown_|
+    // changes, unlike a click event which is captured after
+    // |shouldShowDropdown_| changes.
+    if (!this.shouldShowDropdown_) {
+      // Select all search input text once the initial state is set.
+      const searchInput = this.$.search.getSearchInput();
+      Polymer.RenderStatus.afterNextRender(this, () => searchInput.select());
+    }
+  },
+
   /**
    * @param {!mojom.SearchResult} item The search result item in searchResults_.
    * @return {boolean} True if the item is selected.

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

@@ -91,7 +91,7 @@
 
       label {
         bottom: 0;
-        cursor: text;
+        cursor: var(--cr-toolbar-search-field-cursor, text);
         left: 0;
         overflow: hidden;
         position: absolute;
@@ -109,6 +109,7 @@
         background: transparent;
         border: none;
         color: var(--cr-toolbar-search-field-input-text-color, white);
+        cursor: var(--cr-toolbar-search-field-cursor, text);
         font: inherit;
         outline: none;
         padding: 0;
@@ -132,7 +133,7 @@
             var(--cr-toolbar-search-field-background, rgba(0, 0, 0, 0.22));
         border-radius:
             var(--cr-toolbar-search-field-border-radius, 2px);
-        cursor: text;
+        cursor: var(--cr-toolbar-search-field-cursor, text);
         padding-inline-end: 0;
         width: var(--cr-toolbar-field-width, 680px);
       }