Add No results found label and keyboard shortcut

Localization strings will be addressed in a follow up CL.

Bug: 1099917
Change-Id: I537d681272524b747bd7d35bbf903d812984363b
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3202980Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: Tom Lukaszewicz <tluk@chromium.org>
Reviewed-by: Roman Arora <romanarora@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819577}

chrome/browser/resources/tab_search_merge/BUILD.gn

@@ -14,7 +14,7 @@ js_type_check("closure_compile") {
     ":app",
     ":tab_search_api_proxy",
     ":tab_search_item",
-    ":tab_search_search_field"
+    ":tab_search_search_field",
   ]
 }
 
@@ -24,6 +24,7 @@ js_library("app") {
     ":tab_search_item",
     ":tab_search_search_field",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:cr.m",
   ]
 }
 

chrome/browser/resources/tab_search_merge/app.html

@@ -16,9 +16,16 @@
     overflow-x: hidden;
     overflow-y: auto;
   }
+
+  #no-results {
+    color: var(--cr-primary-text-color);
+    font-size: var(--primary-text-font-size);
+    padding: 12px;
+    text-align: center;
+  }
 </style>
 <tab-search-search-field id="searchField" on-search-changed="onSearchChanged_"
-    label="Search tabs" clear-label="Clear search" on-keydown="onKeyDown_"
+    label="Search tabs [[getKeyboardShortcut_()]]" clear-label="Clear search" on-keydown="onKeyDown_"
     autofocus>
 </tab-search-search-field>
 <div id="tabs">
@@ -30,3 +37,4 @@
     </template>
   </iron-selector>
 </div>
+<div id="no-results" hidden="[[filteredOpenTabs_.length]]">No results found</div>

chrome/browser/resources/tab_search_merge/app.js

@@ -6,11 +6,11 @@ import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
-
 import './tab_search_item.js';
 import './tab_search_search_field.js'
 
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {isMac} from 'chrome://resources/js/cr.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {TabSearchApiProxy, TabSearchApiProxyImpl} from './tab_search_api_proxy.js';
@@ -199,6 +199,14 @@ export class TabSearchAppElement extends PolymerElement {
               {behavior: 'smooth', block: offset > 0 ? 'end' : 'start'});
     }
   }
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getKeyboardShortcut_() {
+    return (isMac ? 'Cmd' : 'Ctrl') + '+Shift+E';
+  }
 }
 
 customElements.define(TabSearchAppElement.is, TabSearchAppElement);