chrome/browser/resources/settings/site_settings/site_entry.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_lazy_render/cr_lazy_render.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="site_settings_behavior.html">

<dom-module id="site-entry">
  <template>
    <style include="settings-shared">
      .row-aligned {
        display: flex;
        flex-direction: row;
      }

      #toggleButton {
        /** Use the minimum row height as the minimum click-target height. */
        min-height: var(--settings-row-min-height);
      }

      /* URLs should always be displayed in a LTR embedding - see
       * https://url.spec.whatwg.org/#url-rendering. */
      .url-directionality {
        direction: ltr;
        unicode-bidi: embed;
      }

      .site-representation {
        display: flex;
      }
    </style>
    <div id="collapseParent">
      <div class="settings-box list-item">
        <div id="toggleButton" class="start row-aligned"
            on-click="onSiteEntryTap_" actionable aria-expanded="false">
          <div class="favicon-image"
              style$="[[getSiteGroupIcon_(siteGroup)]]">
          </div>
          <div class="site-representation middle text-elide" id="displayName">
            <span class="url-directionality">[[displayName_]]</span>
            <span class="secondary" hidden$="[[!scheme_(siteGroup, -1)]]">
              &nbsp;$i18nPolymer{siteSettingsSiteRepresentationSeparator}&nbsp;
            </span>
            <span class="secondary" hidden$="[[!scheme_(siteGroup, -1)]]">
              [[scheme_(siteGroup, -1)]]
            </span>
          </div>
          <paper-icon-button-light id="expandIcon" class="icon-expand-more"
              hidden$="[[!grouped_(siteGroup)]]">
            <button aria-label$="[[displayName_]]"
                aria-describedby="displayName"></button>
          </paper-icon-button-light>
          <paper-icon-button-light class="subpage-arrow"
              hidden$="[[grouped_(siteGroup)]]">
            <button aria-label$="[[displayName_]]"
                aria-describedby="displayName"></button>
          </paper-icon-button-light>
        </div>
        <div class="row-aligned" hidden$="[[!grouped_(siteGroup)]]">
          <div class="separator"></div>
          <paper-icon-button-light class="icon-more-vert">
            <button id="overflowMenuButton" title="$i18n{moreActions}"
                on-click="showOverflowMenu_">
            </button>
          </paper-icon-button-light>
        </div>
      </div>

      <iron-collapse id="collapseChild" no-animation>
        <div class="list-frame">
          <template is="dom-repeat" items="[[siteGroup.origins]]">
            <div class="settings-box list-item" on-click="onOriginTap_"
                actionable>
              <div class="favicon-image" style$="[[computeSiteIcon(item)]]">
              </div>
              <div class="site-representation middle text-elide">
                <span class="url-directionality">
                  [[siteRepresentation_(siteGroup, index)]]
                </span>
                <span class="secondary"
                    hidden$="[[!scheme_(siteGroup, index)]]">
                  &nbsp;$i18nPolymer{siteSettingsSiteRepresentationSeparator}&nbsp;
                </span>
                <span class="secondary"
                    hidden$="[[!scheme_(siteGroup, index)]]">
                  [[scheme_(siteGroup, index)]]
                </span>
              </div>
            </div>
          </template>
        </div>
      </iron-collapse>
    </div>

    <!-- Overflow menu. -->
    <cr-lazy-render id="menu">
      <template>
        <cr-action-menu>
          <button slot="item" class="dropdown-item" role="menuitem"
              on-click="onConfirmResetSettings_">
            Reset permissions
          </button>
        </cr-action-menu>
      </template>
    </cr-lazy-render>

    <!-- Confirm reset settings dialog. -->
    <cr-dialog id="confirmResetSettings" close-text="$i18n{close}">
      <div slot="title">
        $i18n{siteSettingsSiteGroupResetDialogTitle}
      </div>
      <div slot="body">
        [[getFormatString_(
            '$i18nPolymer{siteSettingsSiteGroupResetConfirmation}',
            displayName_)]]
      </div>
      <div slot="button-container">
        <paper-button class="cancel-button" on-click="onCloseDialog_">
          $i18n{cancel}
        </paper-button>
        <paper-button class="action-button" on-click="onResetSettings_">
          $i18n{siteSettingsSiteResetAll}
        </paper-button>
      </div>
    </cr-dialog>
  </template>
  <script src="site_entry.js"></script>
</dom-module>