chrome/browser/resources/md_extensions/item.html

<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://extensions/icons.html">
<link rel="import" href="chrome://extensions/item_source.html">
<link rel="import" href="chrome://extensions/strings.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communication-icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">

<dom-module id="extensions-item">
  <style include="iron-flex"></style>
  <template>
    <style>
      [hidden] {
        display: none !important;
      }

      #icon-wrapper {
        align-self: flex-start;
        display: flex;
        padding: 6px;
      }

      #icon {
        height: 36px;
        width: 36px;
      }

      #card,
      #card-wrapper {
        min-height: 154px;
        width: 400px;
      }

      #card-wrapper {
        @apply(--shadow-elevation-2dp);
        background: white;
      }

      #card {
        display: flex;
        flex-direction: column;
        font-size: 13px;
      }

      #card.disabled {
        opacity: 0.6;
      }

      #main {
        display: flex;
        flex-grow: 1;
        padding: 16px;
      }

      #content {
        -webkit-margin-start: 24px;
        width: 100%;
      }

      #name-and-version {
        margin-bottom: 4px;
      }

      #name {
        -webkit-margin-end: 8px;
        color: var(--paper-grey-800);
      }

      #description {
        margin-bottom: 8px;
      }

      #version,
      #extension-id,
      #inspect-views,
      #button-strip {
        color: var(--paper-grey-600);
      }

      #description,
      #extension-id,
      #inspect-views {
        line-height: 20px;
      }

      #inspect-views paper-button {
        color: var(--google-blue-700);
      }

      #button-strip {
        border-top: 1px solid var(--paper-grey-400);
      }

      #source-indicator {
        align-items: center;
        align-self: flex-end;
        border-radius: 0 2px;
        color: var(--paper-grey-800);
        display: flex;
        min-height: 32px;
        padding: 0 8px;
        position: absolute;
        white-space: nowrap;
      }

      #source-indicator iron-icon {
        height: 16px;
        width: 16px;
      }

      #source-indicator span {
        -webkit-margin-end: 8px;
        display: none;
      }

      #source-indicator:hover {
        background-color: var(--paper-grey-700);
        color: white;
      }

      #source-indicator:hover span {
        display: block;
      }

      paper-button,
      paper-toggle-button {
        cursor: pointer;
      }

      #button-strip paper-button {
        align-items: center;
        display: flex;
        margin: 4px;
        min-height: 32px;
        padding: 0 12px;
        text-transform: uppercase;
      }

      #enable-toggle {
        -webkit-margin-end: 16px;
      }

      .warning {
        align-items: center;
        display: flex;
        font-size: 13px;
        justify-content: space-between;
        padding: 12px 16px;
      }

      .warning paper-button {
        -webkit-margin-start: 12px;
        align-items: center;
        display: flex;
        text-transform: uppercase;
      }

      .severe.warning {
        background-color: var(--paper-red-50);
        color: var(--paper-red-700);
      }

      .mild.warning {
        background-color: var(--paper-yellow-50);
        color: var(--paper-grey-600);
      }

      #blacklisted-warning:empty {
        display: none;
      }
    </style>
    <div id="card-wrapper" class$="[[computeClasses_(data.state)]]">
      <div id="card">
        <template is="dom-if"
            if="[[computeSourceIndicatorIcon_(data.*)]]">
          <div id="source-indicator">
            <span>[[computeSourceIndicatorText_(data.*)]]</span>
            <iron-icon icon="[[computeSourceIndicatorIcon_(data.*)]]">
            </iron-icon>
          </div>
        </template>
        <div id="main">
          <div id="icon-wrapper">
            <img alt="" id="icon" src="[[data.iconUrl]]">
          </div>
          <div id="content">
            <div id="name-and-version" class="layout horizontal center">
              <div id="name">[[data.name]]</div>
              <template is="dom-if" if="[[inDevMode]]">
                <span id="version">[[data.version]]</span>
              </template>
            </div>
            <div id="description">[[data.description]]</div>
            <template is="dom-if" if="[[inDevMode]]">
              <div id="extension-id">[[data.id]]</div>
                <div id="inspect-views">
                  <span>$i18n{itemInspectViews}</span>
                  <template is="dom-repeat" items="[[data.views]]">
                    <paper-button on-tap="onInspectTap_">
                      [[computeInspectLabel_(item)]]
                    </paper-button>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div id="button-strip" class="layout horizontal">
          <div class="layout flex horizontal center">
            <paper-button id="details-button" on-tap="onDetailsTap_">
              $i18n{itemDetails}
            </paper-button>
            <paper-button id="errors-button" on-tap="onErrorsTap_"
                hidden$="[[computeErrorsHidden_(data.*)]]">
              $i18n{itemErrors}
            </paper-button>
            <paper-button id="remove-button" on-tap="onRemoveTap_">
              $i18n{itemRemove}
            </paper-button>
          </div>
          <paper-toggle-button id="enable-toggle"
              checked="[[isEnabled_(data.state)]]" on-change="onEnableChange_">
          </paper-toggle-button>
        </div>
      </div>
      <template is="dom-if" if="[[hasWarnings_(data.*)]]">
        <div id="suspicious-warning" class="warning mild"
            hidden$="[[!data.disableReasons.suspiciousInstall]]">
          $i18n{itemSuspiciousInstall}
        </div>
        <div id="corrupted-warning" class="warning severe"
            hidden$="[[!data.disableReasons.corruptInstall]]">
          <span>$i18n{itemCorruptInstall}</span>
          <paper-button id="repair-button" on-tap="onRepairTap_">
            $i18n{itemRepair}
          </paper-button>
        </div>
        <div id="blacklisted-warning" class="warning severe"><!-- No whitespace
          -->[[data.blacklistText]]<!-- ... so we can use :empty in css
        --></div>
      </template>
    </div>
  </template>
  <script src="chrome://extensions/item.js"></script>
</dom-module>