chrome/browser/resources/bookmarks/list.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="command_manager.html">
<link rel="import" href="item.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="store_client.html">
<link rel="import" href="strings.html">
<link rel="import" href="util.html">
<link rel="import" href="chrome://resources/html/list_property_update_behavior.html">

<dom-module id="bookmarks-list">
  <template>
    <style include="shared-style">
      :host {
        min-width: 300px;
        overflow-y: auto;
        padding-bottom: 24px;
        padding-inline-end: var(--card-padding-side);
        padding-inline-start: calc(var(--card-padding-side) -
            var(--splitter-width));
        padding-top: 24px;
      }

      #list {
        @apply --cr-card-elevation;
        background-color: var(--cr-card-background-color);
        border-radius: var(--cr-card-border-radius);
        margin: 0 auto;
        max-width: var(--card-max-width);
        padding: 8px 0;
      }

      .centered-message {
        align-items: center;
        color: var(--md-loading-message-color);
        cursor: default;
        display: flex;
        font-size: 14px;
        font-weight: 500;
        height: 100%;
        justify-content: center;
        user-select: none;
        white-space: nowrap;
      }
    </style>
    <iron-list id="list"
        items="[[displayedList_]]"
        hidden$="[[isEmptyList_(displayedList_.length)]]"
        role="group"
        aria-label="$i18n{listAxLabel}">
      <template>
        <bookmarks-item item-id="[[item.id]]" draggable="true"
            tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]">
        </bookmarks-item>
      </template>
    </iron-list>
    <div id="message" class="centered-message"
        hidden$="[[!isEmptyList_(displayedList_.length)]]">
      [[emptyListMessage_(searchTerm_)]]
    </div>
  </template>
  <script src="list.js"></script>
</dom-module>