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_favicon.html">
<link rel="import" href="local_data_browser_proxy.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);
      }

      .site-representation {
        display: flex;
      }

      .second-line {
        margin-top: 0.1em;
      }

      /* Data units such as "0 KB" should always read left-to-right. */
      .data-unit {
        direction: ltr;
        unicode-bidi: isolate;
      }

      #collapseChild .data-unit {
        padding-inline-start: 1ch;
      }

      .list-frame {
        padding-inline-end: 0;
      }
    </style>
    <div id="collapseParent">
      <div class$="settings-box list-item [[getClassForIndex_(listIndex)]]">
        <div id="toggleButton" class="start row-aligned two-line"
            on-click="onSiteEntryTap_" actionable aria-expanded="false">
          <site-favicon url="[[getSiteGroupIcon_(siteGroup)]]"></site-favicon>
          <div class="middle text-elide" id="displayName">
            <div class="site-representation">
              <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>
            <div class="second-line secondary">
              <span class="data-unit">[[overallUsageString_]]</span>
              <span id="cookies" hidden$="[[!siteGroup.numCookies]]">
                &middot; [[cookieString_]]
              </span>
            </div>
          </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>
              <site-favicon url="[[item.origin]]"></site-favicon>
              <div class="site-representation middle text-elide">
                <span id="originSiteRepresentation" 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>
                <span class="secondary data-unit" hidden$="[[!item.usage]]">
                  [[originUsagesItem_(originUsages_.*, index)]]
                </span>
              </div>
              <paper-icon-button-light class="subpage-arrow">
                <button aria-labelledby$="originSiteRepresentation"></button>
              </paper-icon-button-light>
            </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>