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

chrome/browser/resources/md_extensions/item_list.html

Index: chrome/browser/resources/md_extensions/item_list.html
diff --git a/chrome/browser/resources/md_extensions/item_list.html b/chrome/browser/resources/md_extensions/item_list.html
index e4ad4abd4d1eea2a9f51475c2362236f0b0715e3..389fa438d8ed2805020fc2db9200ce93131ba3bd 100644
--- a/chrome/browser/resources/md_extensions/item_list.html
+++ b/chrome/browser/resources/md_extensions/item_list.html
@@ -1,3 +1,4 @@
+<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">
@@ -8,7 +9,7 @@
 
 <dom-module id="extensions-item-list">
   <template>
-    <style>
+    <style include="cr-hidden-style">
       :host {
         @apply(--layout-vertical);
       }
@@ -18,11 +19,31 @@
         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">