chrome/browser/resources/md_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/paper_button_style_css.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/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/paper-button/paper-button.html">
<link rel="import" href="runtime_hosts_dialog.html">
<link rel="import" href="strings.html">

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

      #hosts li {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }

      .mid-section-header {
        color: var(--cr-primary-text-color);
        margin-top: 12px;
      }

      #permissions-mode {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }

      a[href] {
        color: var(--google-blue-700);
        text-decoration: none;
      }
    </style>
    <div id="permissions-mode">
      <div>
        <div class="mid-section-header">
          $i18n{hostPermissionsHeading}
        </div>
        <div>
          $i18nRaw{hostPermissionsLearnMoreLink}
        </div>
      </div>
      <select id="host-access" class="md-select"
          value="[[permissions.hostAccess]]"
          on-change="onHostAccessChange_">
        <option value$="[[HostAccess_.ON_CLICK]]">
          $i18n{hostAccessOnClick}
        </option>
        <option value$="[[HostAccess_.ON_SPECIFIC_SITES]]">
          $i18n{hostAccessOnSpecificSites}
        </option>
        <option value$="[[HostAccess_.ON_ALL_SITES]]">
          $i18n{hostAccessOnAllSites}
        </option>
      </select>
    </div>
    <template is="dom-if" if="[[showSpecificSites_(permissions.*)]]">
      <div id="add-hosts-section">
        <div class="mid-section-header">
          $i18n{hostAllowedHosts}
        </div>
        <paper-button id="add-host" on-click="onAddHostClick_">
          $i18n{add}
        </paper-button>
      </div>
      <ul id="hosts">
        <template is="dom-repeat"
            items="[[permissions.runtimeHostPermissions]]">
          <li>
            <div>[[item]]</div>
            <paper-icon-button-light class="icon-more-vert">
              <button class="edit-host"
                  on-click="onEditHostClick_"
                  title="$i18n{hostPermissionsEdit}">
              </button>
            </paper-icon-button-light>
          </li>
        </template>
      </ul>
    </template>
    <cr-action-menu id="hostActionMenu"
        on-close="onActionMenuClose_">
      <button slot="item" class="dropdown-item" id="action-menu-edit"
          on-click="onActionMenuEditClick_">
        $i18n{hostPermissionsEdit}
      </button>
      <button slot="item" 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>