chrome/browser/resources/settings/chrome_cleanup_page/items_to_remove_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/html/util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="chrome_cleanup_proxy.html">

<dom-module id="items-to-remove-list">
  <template>
    <style include="settings-shared">
      :host {
        display: block;
        margin: 0;
        padding: 0 var(--settings-box-row-padding);
        word-break: break-all;
      }

      #more-items-link {
        color: var(--cr-link-color);
        cursor: pointer;
      }

      #remaining-list :first-child {
        margin-top: -1em;
      }

      .highlight-suffix {
        font-weight: bold;
      }

    </style>
    <div id="title" class="secondary">[[title]]</div>
    <ul class="secondary">
      <template is="dom-repeat" items="[[initialItems_]]">
        <li class="visible-item">
          <span>[[item.text]]</span><!--
       --><span class="highlight-suffix"
                hidden="[[!hasHighlightSuffix_(item)]]"><!--
         -->[[item.highlightSuffix]]
          </span>
        </li>
      </template>
      <li id="more-items-link" hidden="[[expanded_]]" on-click="expandList_">
        [[moreItemsLinkText_]]
      </li>
    </ul>
    <!-- Remaining items are kept in a separate <ul> element so that screen
         readers don't get confused when the list is expanded. If new items are
         simply added to the first <ul> element, the first new item (which will
         replace the "N more" link), will be skipped by the reader. As a
         consequence, visual impaired users will only have a chance to inspect
         that item if they move up on the list, which can't be considered an
         expected action. -->
    <ul id="remaining-list" hidden="[[!expanded_]]" class="secondary">
      <template is="dom-repeat" items="[[remainingItems_]]">
        <li class$="[[remainingItemsClass_(expanded_)]]">
          <span>[[item.text]]</span><!--
       --><span class="highlight-suffix"
                hidden="[[!hasHighlightSuffix_(item)]]"><!--
         -->[[item.highlightSuffix]]
          </span>
        </li>
      </template>
    </ul>
  </template>
  <script src="items_to_remove_list.js"></script>
</dom-module>