Add search hint bubbles to Print Preview advanced options controls.

BUG=397741

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

Cr-Commit-Position: refs/heads/master@{#293827}

chrome/browser/resources/print_preview/common/search_box.js

@@ -99,9 +99,13 @@ cr.define('print_preview', function() {
       var searchEvent = new Event(SearchBox.EventType.SEARCH);
       var query = this.getQuery_();
       searchEvent.query = query;
-      // Generate regexp-safe query by escaping metacharacters.
-      var safeQuery = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-      searchEvent.queryRegExp = new RegExp('(' + safeQuery + ')', 'ig');
+      if (query) {
+        // Generate regexp-safe query by escaping metacharacters.
+        var safeQuery = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+        searchEvent.queryRegExp = new RegExp('(' + safeQuery + ')', 'ig');
+      } else {
+        searchEvent.queryRegExp = null;
+      }
       this.dispatchEvent(searchEvent);
     },
 

chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings.css

@@ -36,5 +36,11 @@
 #advanced-settings .settings {
   border-spacing: 0;
   display: table;
+  position: relative;
   width: 100%;
 }
+
+.advanced-settings-item-extra-padding {
+  display: table-row;
+  height: 15px;
+}

chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings.js

@@ -126,9 +126,15 @@ cr.define('print_preview', function() {
      * @private
      */
     filterLists_: function(query) {
+      var lastVisibleItemWithBubble = null;
       this.items_.forEach(function(item) {
         item.updateSearchQuery(query);
+        if (item.searchBubbleShown)
+          lastVisibleItemWithBubble = item;
       });
+      setIsVisible(
+          this.getChildElement('.advanced-settings-item-extra-padding'),
+          !!lastVisibleItemWithBubble);
     },
 
     /**
@@ -158,14 +164,20 @@ cr.define('print_preview', function() {
       var availableHeight = this.getAvailableContentHeight_();
       var containerEl = this.getChildElement('.settings-area');
       containerEl.style.maxHeight = availableHeight + 'px';
+      var settingsEl = this.getChildElement('.settings');
 
       vendorCapabilities.forEach(function(capability) {
         var item = new print_preview.AdvancedSettingsItem(
             this.eventTarget_, this.printTicketStore_, capability);
         this.addChild(item);
-        item.render(this.getChildElement('.settings'));
+        item.render(settingsEl);
         this.items_.push(item);
       }.bind(this));
+
+      var extraPadding = document.createElement('div');
+      extraPadding.classList.add('advanced-settings-item-extra-padding');
+      extraPadding.hidden = true;
+      settingsEl.appendChild(extraPadding);
     },
 
     /**

chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings_item.css

@@ -15,7 +15,6 @@
 .advanced-settings-item-label {
   -webkit-padding-end: 20px;
   display: table-cell;
-  line-height: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
@@ -35,7 +34,6 @@
 
 .advanced-settings-item-value {
   display: table-cell;
-  line-height: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
@@ -43,7 +41,12 @@
   width: 175px;
 }
 
+.advanced-settings-item-value-select-control {
+  line-height: 24px;
+}
+
 .advanced-settings-item-value-text-control {
   height: 28px;
+  line-height: 24px;
   width: 175px;
-}
\ No newline at end of file
+}

chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings_item.js

@@ -109,6 +109,10 @@ cr.define('print_preview', function() {
       this.renderCapability_();
     },
 
+    get searchBubbleShown() {
+      return getIsVisible(this.getElement()) && !!this.searchBubble_;
+    },
+
     /**
      * @return {HTMLSelectElement} Select element.
      * @private
@@ -155,7 +159,7 @@ cr.define('print_preview', function() {
       var textContent = this.capability_.display_name;
       var nameMatches = this.query_ ? !!textContent.match(this.query_) : true;
       var optionMatches = null;
-      if (false && this.query_) {
+      if (this.query_) {
         if (this.capability_.type == 'SELECT') {
           this.capability_.select_cap.option.some(function(option) {
             optionMatches = (option.display_name || '').match(this.query_);
@@ -186,7 +190,6 @@ cr.define('print_preview', function() {
       nameEl.title = textContent;
 
       if (optionMatches) {
-        window.console.log(optionMatches[0]);
         var element =
             this.capability_.type == 'SELECT' ? this.select_ : this.text_;
         if (!this.searchBubble_) {