Site Settings Desktop: Implement Zoom Levels category.

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

Index: chrome/browser/resources/settings/site_settings/zoom_levels.html
diff --git a/chrome/browser/resources/settings/site_settings/zoom_levels.html b/chrome/browser/resources/settings/site_settings/zoom_levels.html
new file mode 100644
index 0000000000000000000000000000000000000000..cc56801f38bf6f7909b8de646538fea9f1e893e8
--- /dev/null
+++ b/chrome/browser/resources/settings/site_settings/zoom_levels.html
@@ -0,0 +1,48 @@
+<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/polymer/v1_0/paper-icon-button/paper-icon-button.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/site_settings_behavior.html">
+<link rel="import" href="/site_settings/site_settings_prefs_browser_proxy.html">
+
+<dom-module id="zoom-levels">
+  <template>
+    <style include="settings-shared">
+      :host {
+        display: block;
+      }
+
+      .empty-message {
+        margin-top: 15px;
+      }
+    </style>
+    <div class="list-frame vertical-list" id="listContainer">
+      <template is="dom-repeat" items="[[sites_]]" id="list"
+          rendered-item-count="{{renderedCount}}">
+        <div class="list-item">
+          <div class="start layout horizontal center">
+            <div class="favicon-image"
+                style$="[[computeSiteIcon(item.origin)]]">
+            </div>
+            <div class="middle">
+              <div>[[item.origin]]</div>
+            </div>
+            <div>[[item.zoom]]</div>
+            <div>
+              <paper-icon-button icon="settings:delete"
+                  on-tap="removeZoomLevel_">
+            </div>
+          </div>

[dschuyler, 2016/09/08 22:14:32]

nit: I think this can be written without the outer div.
The class="middle" div should push the icon to the start
and the other divs to the end.

          <div class="favicon-image"
              style$="[[computeSiteIcon(item.origin)]]">
          </div>
          <div class="middle">
            <div>[[item.origin]]</div>
          </div>
          <div>[[item.zoom]]</div>
          <div>
            <paper-icon-button icon="settings:delete"
                on-tap="removeZoomLevel_">
          </div>

[Finnur, 2016/09/09 09:56:18]

Done.

+        </div>
+      </template>
+      <template is="dom-if" if="{{!renderedCount}}">
+        <div class="empty-message" id="empty">
+          $i18n{siteSettingsNoZoomedSites}
+        </div>
+      </template>
+    </div>
+  </template>
+  <script src="zoom_levels.js"></script>
+</dom-module>