chrome/browser/resources/extensions/runtime_host_permissions.html

<style include="cr-shared-style action-link md-select shared-style cr-icons">
  iron-icon {
    --iron-icon-height: var(--cr-icon-size);
    --iron-icon-width: var(--cr-icon-size);
  }

  .link-icon-button {
    margin-inline-start: 6px;
  }

  #section-heading {
    --md-select-width: 160px;
    align-items: center;
    display: flex;
  }

  #section-heading-heading {
    display: flex;
    flex: 1;
  }

  #section-heading .link-icon-button {
    margin-inline-start: 6px;
  }

  #hostAccess {
    margin-inline-start: 12px;
    width: 100%;
  }

  #hosts {
    margin-bottom: 0;
    padding-inline-start: calc(
        var(--cr-section-indent-padding) - var(--cr-section-padding));
  }

  #hosts li {
    align-items: center;
    border-top: var(--cr-separator-line);
    display: flex;
    height: var(--cr-section-min-height);
  }

  #hosts li:first-child {
    border-top: none;
  }

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

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

  #new-permissions-mode {
    color: var(--cr-primary-text-color);
    margin-top: 12px;
    padding-inline-start: calc(
        var(--cr-section-indent-padding) - var(--cr-section-padding));
  }

  #new-section-heading {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  #new-section-heading-title {
    display: flex;
  }

  #new-section-heading-subtext {
    color: var(--cr-secondary-text-color);
    margin-top: 3px;
  }

  #host-access-row {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    width: 100%;
  }

  .site {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-favicon {
    margin-inline-end: calc(
        var(--cr-section-padding) + var(--cr-icon-ripple-margin));
  }
</style>
<template is="dom-if" if="[[!enableEnhancedSiteControls]]">
  <div id="permissions-mode">
    <div id="section-heading">
      <div id="section-heading-heading">
        <span id="section-heading-text">
          $i18n{hostPermissionsHeading}
        </span>
        <a class="link-icon-button"
            aria-label="$i18n{permissionsLearnMoreLabel}"
            href="$i18n{hostPermissionsLearnMoreLink}" target="_blank"
            on-click="onLearnMoreClick_">
          <iron-icon icon="cr:help-outline"></iron-icon>
        </a>
      </div>
      <div>
        <select id="hostAccess" class="md-select"
            on-change="onHostAccessChange_"
            value="[[permissions.hostAccess]]"
            aria-labelledby="section-heading-text">
          <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>
    </div>
  </div>
</template>

<template is="dom-if" if="[[enableEnhancedSiteControls]]">
  <div id="new-permissions-mode">
    <div id="new-section-heading">
      <div id="new-section-heading-title">
        <span id="new-section-heading-text">
            $i18n{newHostPermissionsHeading}
        </span>
        <a class="link-icon-button"
            aria-label="$i18n{permissionsLearnMoreLabel}"
            href="$i18n{hostPermissionsLearnMoreLink}" target="_blank"
            on-click="onLearnMoreClick_">
          <iron-icon icon="cr:help-outline"></iron-icon>
        </a>
      </div>
      <span id="new-section-heading-subtext">
        $i18n{hostPermissionsSubHeading}
      </span>
      <div id="host-access-row">
        <select id="newHostAccess" class="md-select"
            on-change="onHostAccessChange_"
            value="[[permissions.hostAccess]]"
            aria-labelledby="new-section-heading-text">
          <option value="[[HostAccess_.ON_CLICK]]">
            $i18n{hostAccessAskOnEveryVisit}
          </option>
          <option value="[[HostAccess_.ON_SPECIFIC_SITES]]">
            $i18n{hostAccessAllowOnSpecificSites}
          </option>
          <option value="[[HostAccess_.ON_ALL_SITES]]">
            $i18n{hostAccessAllowOnAllSites}
          </option>
        </select>
        <cr-button id="add-site-button"
            hidden="[[!showSpecificSites_(permissions.*)]]"
            on-click="onAddHostClick_">
          $i18n{add}
        </cr-button>
      </div>
    </div>
  </div>
</template>

<template is="dom-if" if="[[showSpecificSites_(permissions.*)]]">
  <ul id="hosts">
    <template is="dom-repeat"
        items="[[getRuntimeHosts_(permissions.hosts)]]">
      <li>
        <div class="site-favicon"
            style$="background-image:[[getFaviconUrl_(item)]]"
            hidden$="[[!enableEnhancedSiteControls]]"></div>
        <div class="site">[[item]]</div>
        <cr-icon-button class="icon-edit edit-host"
            on-click="onEditHostClick_"
            hidden$="[[!enableEnhancedSiteControls]]"></cr-icon-button>
        <cr-icon-button class="icon-delete-gray remove-host"
            on-click="onDeleteHostClick_"
            hidden$="[[!enableEnhancedSiteControls]]"></cr-icon-button>
        <cr-icon-button class="icon-more-vert open-edit-host"
            on-click="onOpenEditHostClick_"
            title="$i18n{hostPermissionsEdit}"
            hidden$="[[enableEnhancedSiteControls]]"></cr-icon-button>
      </li>
    </template>
    <li hidden$="[[enableEnhancedSiteControls]]">
      <a id="add-host" is="action-link" on-click="onAddHostClick_">
        $i18n{itemSiteAccessAddHost}
      </a>
    </li>
  </ul>
</template>

<cr-action-menu id="hostActionMenu" role-description="$i18n{menu}">
  <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]]"
      enable-enhanced-site-controls="[[enableEnhancedSiteControls]]"
      current-site="[[hostDialogModel_]]"
      update-host-access="[[dialogShouldUpdateHostAccess_(oldHostAccess_)]]"
      on-close="onHostDialogClose_"
      on-cancel="onHostDialogCancel_">
  </extensions-runtime-hosts-dialog>
</template>
<template is="dom-if" if="[[showRemoveSiteDialog_]]" restamp>
  <cr-dialog id="removeSitesDialog" on-cancel="onRemoveSitesWarningCancel_"
      show-on-attach>
    <div slot="title">$i18n{removeSitesDialogTitle}</div>
    <div slot="button-container">
      <cr-button class="cancel-button" on-click="onRemoveSitesWarningCancel_">
        $i18n{cancel}
      </cr-button>
      <cr-button class="action-button" on-click="onRemoveSitesWarningConfirm_">
        $i18n{remove}
      </cr-button>
    </div>
  </cr-dialog>
</template>