chrome/browser/resources/extensions/runtime_host_permissions.html

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

<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/icons.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/html/action_link.html">
<link rel="import" href="chrome://resources/html/action_link_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
<link rel="import" href="chrome://resources/html/md_select_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="runtime_hosts_dialog.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="strings.html">

<dom-module id="extensions-runtime-host-permissions">
  <template>
    <style include="cr-shared-style action-link md-select paper-button-style
        shared-style">
      #section-heading {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }

      #host-access {
        margin-inline-start: 20px;
        width: 100%;
      }

      #hosts {
        margin-bottom: 0;
        padding: 0;
      }

      #hosts li {
        align-items: center;
        border-bottom: var(--cr-separator-line);
        display: flex;
        height: var(--cr-section-min-height);
        justify-content: space-between;
      }

      #hosts li:last-child {
        border-bottom: none;
      }

      #add-host {
        font-weight: 500;
        width: 100%;
      }

      #permissions-mode {
        color: var(--cr-primary-text-color);
        margin-top: 12px;
      }

      cr-radio-button.multi-row {
        align-items: normal;
      }

      cr-icon-button {
        margin: 0;
      }
    </style>
    <div id="permissions-mode">
      <div id="section-heading">
        <span>$i18n{hostPermissionsHeading}</span>
        <a class="link-icon-button" aria-label="$i18n{learnMore}"
            href="$i18n{hostPermissionsLearnMoreLink}" target="_blank">
          <iron-icon icon="cr:info-outline"></iron-icon>
        </a>
      </div>
      <cr-radio-group id="host-access" selected="[[permissions.hostAccess]]"
          on-selected-changed="onHostAccessChange_">
        <cr-radio-button name="[[HostAccess_.ON_CLICK]]">
          $i18n{hostAccessOnClick}
        </cr-radio-button>
        <cr-radio-button name="[[HostAccess_.ON_SPECIFIC_SITES]]"
            class="multi-row">
          <div>
            $i18n{hostAccessOnSpecificSites}
          </div>
          <template is="dom-if" if="[[showSpecificSites_(permissions.*)]]">
            <ul id="hosts">
              <template is="dom-repeat"
                  items="[[getRuntimeHosts_(permissions.hosts)]]">
                <li>
                  <div>[[item]]</div>
                  <cr-icon-button class="icon-more-vert edit-host"
                      on-click="onEditHostClick_"
                      title="$i18n{hostPermissionsEdit}"></cr-icon-button>
                </li>
              </template>
              <li>
                <a id="add-host" is="action-link" on-click="onAddHostClick_">
                  $i18n{itemSiteAccessAddHost}
                </a>
              </li>
            </ul>
          </template>
        </cr-radio-button>
        <cr-radio-button name="[[HostAccess_.ON_ALL_SITES]]">
          $i18n{hostAccessOnAllSites}
        </cr-radio-button>
      </cr-radio-group>
    </div>
    <cr-action-menu id="hostActionMenu"
        on-close="onActionMenuClose_">
      <button class="dropdown-item" id="action-menu-edit"
          on-click="onActionMenuEditClick_">
        $i18n{hostPermissionsEdit}
      </button>
      <button class="dropdown-item" id="action-menu-remove"
          on-click="onActionMenuRemoveClick_">
        $i18n{remove}
      </button>
    </cr-action-menu>
    <template is="dom-if" if="[[showHostDialog_]]" restamp>
      <extensions-runtime-hosts-dialog
          delegate="[[delegate]]" item-id="[[itemId]]"
          current-site="[[hostDialogModel_]]"
          update-host-access="[[dialogShouldUpdateHostAccess_(oldHostAccess_)]]"
          on-close="onHostDialogClose_"
          on-cancel="onHostDialogCancel_">
      </extensions-runtime-hosts-dialog>
    </template>
  </template>
  <script src="runtime_host_permissions.js"></script>
</dom-module>