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)]]"
+    <div id="no-items" class="empty-list-message"

[Devlin, 2017/07/10 20:23:53]

If we wanted to be super fancy, we could do:

#empty-list-message:has(>span:empty) {
  display: none;
}

<div id="empty-list-message">
  <span>[[getEmptyListMessageIfAny_(shownItems_)]]</span>
</div>

And then limit ourselves to one method, hidden rule, and div/span.

WDYT?  (It would also make the precedence in the JS a little simpler, since
shouldShowEmptySearchMessage_() wouldn't call into shouldShowEmptyItemsMessage).

[scottchen, 2017/07/10 22:13:40]

I was trying to think of clever ways to do only 1 js function too, and that's a
really interesting approach I hadn't thought about! Though, doing this would
require us to do i18n during run-time, which  is slightly less ideal than
$18n{}. Thoughts?

[Devlin, 2017/07/12 02:22:02]

Given these are the (slightly) less common case, and thus the i18n runtime call
is typically avoided, I'd lean towards having the single element and function.

[scottchen, 2017/07/12 18:08:04]

I tried to do as you suggested, then found out that the :has() pseudo-class
isn't supported yet (looks like it's only in spec draft), so we'll have to make
yet another JS function to hide the .empty-list-message div anyway.

I think I'll just land this as-is, and we can come back to refactor it if we
think of something cleaner.

+        hidden$="[[!shouldShowEmptyItemsMessage_(items.length)]]">
+      <span>$i18nRaw{noExtensionsOrApps}</span>
+    </div>
+    <div id="no-search-results" class="empty-list-message"
+        hidden$="[[!shouldShowEmptySearchMessage_(shownItems_.length)]]">
+      <span>$i18n{noSearchResults}</span>
+    </div>
+
+    <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>