| <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/html/list_property_update_behavior.html"> |
| <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="../i18n_setup.html"> |
| <link rel="import" href="../settings_shared_css.html"> |
| <link rel="import" href="../site_favicon.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 { |
| color: var(--cr-secondary-text-color); |
| margin-inline-end: 16px; |
| } |
| |
| #empty { |
| margin-top: 15px; |
| } |
| |
| .list-item site-favicon { |
| flex-shrink: 0; |
| } |
| |
| .list-item .middle { |
| overflow-x: hidden; |
| text-overflow: ellipsis; |
| } |
| </style> |
| <div class="list-frame vertical-list" id="listContainer"> |
| <iron-list id="list" preserve-focus items="[[sites_]]" |
| class="cr-separators" risk-selection> |
| <template> |
| <div class="list-item" first$="[[!index]]"> |
| <site-favicon url="[[item.originForFavicon]]"></site-favicon> |
| <div class="middle"> |
| <span class="url-directionality">[[item.displayName]]</span> |
| </div> |
| <div class="zoom-label">[[item.zoom]]</div> |
| <paper-icon-button-light class="icon-clear"> |
| <button on-click="removeZoomLevel_" |
| title="$i18n{siteSettingsRemoveZoomLevel}" |
| tabindex$="[[tabIndex]]"></button> |
| </paper-icon-button-light> |
| </div> |
| </template> |
| </iron-list> |
| <div id="empty" hidden$="[[!showNoSites_]]"> |
| $i18n{siteSettingsNoZoomedSites} |
| </div> |
| </div> |
| </template> |
| <script src="zoom_levels.js"></script> |
| </dom-module> |