chrome/browser/resources/settings/site_settings/zoom_levels.html

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

<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="site_settings_behavior.html">
<link rel="import" href="site_settings_prefs_browser_proxy.html">

<dom-module id="zoom-levels">
  <template>
    <style include="settings-shared">
      :host {
        display: block;
      }

      .zoom-label {
        -webkit-margin-end: 16px;
        color: var(--cr-secondary-text-color);
      }

      #empty {
        margin-top: 15px;
      }
    </style>
    <div class="list-frame vertical-list" id="listContainer">
      <template is="dom-repeat" items="[[sites_]]" id="list">
        <div class="list-item">
          <div class="favicon-image"
              style$="[[computeSiteIcon(item.originForFavicon)]]">
          </div>
          <div class="middle">
            <div>[[item.displayName]]</div>
          </div>
          <div class="zoom-label">[[item.zoom]]</div>
          <div>
            <paper-icon-button-light class="icon-clear">
              <button on-click="removeZoomLevel_"
                  title="$i18n{siteSettingsRemoveZoomLevel}"></button>
            </paper-icon-button-light>
          </div>
        </div>
      </template>
      <template is="dom-if" if="[[!sites_.length]]">
        <div id="empty">
          $i18n{siteSettingsNoZoomedSites}
        </div>
      </template>
    </div>
  </template>
  <script src="zoom_levels.js"></script>
</dom-module>