Print Preview Advanced settings tweaks:

- add 'No matches were found.' hint
- adjust search bubble content when text option content changes
- fix extra padding

BUG=413520,413522

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

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

chrome/app/generated_resources.grd

@@ -8336,6 +8336,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
         <message name="IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_DIALOG_TITLE" desc="Title of the advanced printer settings selection dialog.">
           Advanced settings for <ph name="PRINTING_DESTINATION">$1<ex>Office printer</ex></ph>
         </message>
+        <message name="IDS_PRINT_PREVIEW_NO_ADVANCED_SETTINGS_MATCH_SEARCH_HINT" desc="Message to display in the printer advanced settings dialog when no settings match search string entered by the user.">
+          No matches were found.
+        </message>
         <message name="IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_DIALOG_CONFIRM" desc="In title case: The text for the accept button on the printer advanced settings dialog.">
           Apply
         </message>

chrome/browser/resources/print_preview/common/search_bubble.css

@@ -18,8 +18,10 @@
   background: linear-gradient(rgba(255, 248, 172, 0.9),
                               rgba(255, 243, 128, 0.9));
   border-radius: 2px;
+  overflow: hidden;
   padding: 4px 10px;
   text-align: center;
+  text-overflow: ellipsis;
   width: 100px;
 }
 

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

@@ -28,6 +28,13 @@
   -webkit-user-select: none;
 }
 
+#advanced-settings .no-settings-match-hint {
+  -webkit-padding-start: 17px;
+  color: #999;
+  padding-bottom: 8px;
+  padding-top: 8px;
+}
+
 #advanced-settings .settings-area {
   overflow-y: auto;
   padding: 0 17px;

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

@@ -3,6 +3,9 @@
     <h1 class="advanced-settings-title"></h1>
     <div class="close-button"></div>
     <div class="search-box-area"></div>
+    <div class="no-settings-match-hint"
+         i18n-content="noAdvancedSettingsMatchSearchHint" hidden>
+    </div>
     <div class="settings-area">
       <div class="settings"></div>
     </div>

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

@@ -39,6 +39,15 @@ cr.define('print_preview', function() {
     this.items_ = [];
   };
 
+  /**
+   * CSS classes used by the component.
+   * @enum {string}
+   * @private
+   */
+  AdvancedSettings.Classes_ = {
+    EXTRA_PADDING: 'advanced-settings-item-extra-padding'
+  };
+
   AdvancedSettings.prototype = {
     __proto__: print_preview.Overlay.prototype,
 
@@ -126,14 +135,19 @@ cr.define('print_preview', function() {
      * @private
      */
     filterLists_: function(query) {
+      var atLeastOneMatch = false;
       var lastVisibleItemWithBubble = null;
       this.items_.forEach(function(item) {
         item.updateSearchQuery(query);
+        if (getIsVisible(item.getElement()))
+          atLeastOneMatch = true;
         if (item.searchBubbleShown)
           lastVisibleItemWithBubble = item;
       });
       setIsVisible(
-          this.getChildElement('.advanced-settings-item-extra-padding'),
+          this.getChildElement('.no-settings-match-hint'), !atLeastOneMatch);
+      setIsVisible(
+          this.getChildElement('.' + AdvancedSettings.Classes_.EXTRA_PADDING),
           !!lastVisibleItemWithBubble);
     },
 
@@ -157,6 +171,11 @@ cr.define('print_preview', function() {
       }.bind(this));
       this.items_ = [];
 
+      var extraPadding =
+          this.getChildElement('.' + AdvancedSettings.Classes_.EXTRA_PADDING);
+      if (extraPadding)
+        extraPadding.parentNode.removeChild(extraPadding);
+
       var vendorCapabilities = this.printTicketStore_.vendorItems.capability;
       if (!vendorCapabilities)
         return;
@@ -174,8 +193,8 @@ cr.define('print_preview', function() {
         this.items_.push(item);
       }.bind(this));
 
-      var extraPadding = document.createElement('div');
-      extraPadding.classList.add('advanced-settings-item-extra-padding');
+      extraPadding = document.createElement('div');
+      extraPadding.classList.add(AdvancedSettings.Classes_.EXTRA_PADDING);
       extraPadding.hidden = true;
       settingsEl.appendChild(extraPadding);
     },

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

@@ -149,6 +149,16 @@ cr.define('print_preview', function() {
      */
     onTextInput_: function() {
       this.selectedValue_ = this.text_.value || null;
+
+      if (this.query_) {
+        var optionMatches = (this.selectedValue_ || '').match(this.query_);
+        // Even if there's no match anymore, keep the item visible to do not
+        // surprise user.
+        if (optionMatches)
+          this.showSearchBubble_(optionMatches[0]);
+        else
+          this.hideSearchBubble_();
+      }
     },
 
     /**
@@ -171,10 +181,8 @@ cr.define('print_preview', function() {
       }
       var matches = nameMatches || optionMatches;
 
-      if ((!matches || !optionMatches) && this.searchBubble_) {
-        this.searchBubble_.dispose();
-        this.searchBubble_ = null;
-      }
+      if (!matches || !optionMatches)
+        this.hideSearchBubble_();
 
       setIsVisible(this.getElement(), matches);
       if (!matches)
@@ -189,15 +197,34 @@ cr.define('print_preview', function() {
       }
       nameEl.title = textContent;
 
-      if (optionMatches) {
-        var element =
-            this.capability_.type == 'SELECT' ? this.select_ : this.text_;
-        if (!this.searchBubble_) {
-          this.searchBubble_ = new print_preview.SearchBubble(optionMatches[0]);
-          this.searchBubble_.attachTo(element);
-        } else {
-          this.searchBubble_.content = optionMatches[0];
-        }
+      if (optionMatches)
+        this.showSearchBubble_(optionMatches[0]);
+    },
+
+    /**
+     * Shows search bubble for this element.
+     * @param {string} text Text to show in the search bubble.
+     * @private
+     */
+    showSearchBubble_: function(text) {
+      var element =
+          this.capability_.type == 'SELECT' ? this.select_ : this.text_;
+      if (!this.searchBubble_) {
+        this.searchBubble_ = new print_preview.SearchBubble(text);
+        this.searchBubble_.attachTo(element);
+      } else {
+        this.searchBubble_.content = text;
+      }
+    },
+
+    /**
+     * Hides search bubble associated with this element.
+     * @private
+     */
+    hideSearchBubble_: function() {
+      if (this.searchBubble_) {
+        this.searchBubble_.dispose();
+        this.searchBubble_ = null;
       }
     },
 

chrome/browser/ui/webui/print_preview/print_preview_ui.cc

@@ -336,6 +336,9 @@ content::WebUIDataSource* CreatePrintPreviewUISource() {
       IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_SEARCH_BOX_PLACEHOLDER);
   source->AddLocalizedString("advancedSettingsDialogTitle",
                              IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_DIALOG_TITLE);
+  source->AddLocalizedString(
+      "noAdvancedSettingsMatchSearchHint",
+      IDS_PRINT_PREVIEW_NO_ADVANCED_SETTINGS_MATCH_SEARCH_HINT);
   source->AddLocalizedString(
       "advancedSettingsDialogConfirm",
       IDS_PRINT_PREVIEW_ADVANCED_SETTINGS_DIALOG_CONFIRM);