MD Extensions: Show messages for no extensions, and for no search results

chrome/browser/resources/md_extensions/item_list.html

+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
 <link rel="import" href="chrome://extensions/animation_helper.html">
 <link rel="import" href="chrome://extensions/item.html">
 
 <dom-module id="extensions-item-list">
   <template>
-    <style>
+    <style include="cr-hidden-style">
       :host {
         @apply(--layout-vertical);
       }
 
       iron-list {
         @apply(--layout-flex);
         margin-top: 18px;
       }
 
+      .empty-list-message {
+        align-items: center;
+        color: #6e6e6e;
+        display: flex;
+        flex: 1;
+        font-weight: 500;
+        justify-content: center;
+      }
+
       .wrapper {
         padding: 6px;
       }
     </style>
-    <iron-list id="list" items="[[computeShownItems_(items.*, filter)]]"
+    <template is="dom-if" if="[[isEmpty_(items.length)]]">

[dpapad, 2017/07/07 00:45:04]

Dom-if has a lot of overhead. It makes sense when it wraps a comlex part of the
UI. But wrapping a simple div in a dom-if does more harm than good. I suggest
just hiding the div and removing the dom-if.

[Devlin, 2017/07/07 00:48:07]

This is a very cheap section.  We should probably use hidden$= rather than a
dom-if.

[scottchen, 2017/07/07 23:08:42]

Done.

+      <div class="empty-list-message">
+        <span>$i18nRaw{noExtensionsOrApps}</span>
+      </div>
+    </template>
+    <template is="dom-if" if="[[!isEmpty_(items.length)]]">
+      <div class="empty-list-message"
+          hidden$="[[!isEmpty_(shownItems_.length)]]">
+        <span>$i18n{noSearchResults}</span>
+      </div>
+    </template>
+    <iron-list id="list" items="[[shownItems_]]"
         as="item" grid>
       <template>
         <div class="wrapper">
           <extensions-item data="[[item]]" delegate="[[delegate]]"
               id="[[item.id]]" in-dev-mode="[[inDevMode]]">
           </extensions-item>
         </div>
       </template>
     </iron-list>
   </template>
   <script src="chrome://extensions/item_list.js"></script>
 </dom-module>