chrome/browser/resources/md_extensions/host_permissions_toggle_list.html

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

<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="toggle_row.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="strings.html">

<dom-module id="extensions-host-permissions-toggle-list">
  <template>
    <style include="cr-shared-style shared-style">
      #section-heading {
        align-items: center;
        color: var(--cr-primary-text-color);
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
      }

      .toggle-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: var(--cr-section-min-height);
      }

      .site-toggle {
        border-top: var(--cr-separator-line);
        margin-inline-start: var(--cr-section-indent-width);
      }
    </style>
    <div id="section-heading">
      <span>$i18n{hostPermissionsDescription}</span>
      <a id="link-icon-button" aria-label="$i18n{learnMore}"
          href="$i18n{hostPermissionsLearnMoreLink}" target="_blank">
        <iron-icon icon="cr:info-outline"></iron-icon>
      </a>
    </div>
    <div class="toggle-section">
      <extensions-toggle-row checked="[[allowedOnAllHosts_(permissions.*)]]"
          id="allHostsToggle"
          on-change="onAllHostsToggleChanged_">
        <span>$i18n{itemAllowOnFollowingSites}</span>
      </extensions-toggle-row>
    </div>
    <template is="dom-repeat" items="[[getSortedHosts_(permissions.*)]]">
      <div class="toggle-section site-toggle">
        <extensions-toggle-row checked="[[item.granted]]"
            class="host-toggle no-end-padding"
            disabled="[[allowedOnAllHosts_(permissions.*)]]"
            host="[[item.host]]"
            on-change="onHostAccessChanged_">
          <span>[[item.host]]</span>
        </extensions-toggle-row>
      </div>
    </template>
  </template>
  <script src="host_permissions_toggle_list.js"></script>
</dom-module>