chrome/browser/resources/md_extensions/pack_dialog.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/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">

<dom-module id="extensions-pack-dialog">
  <template>
    <style>
      dialog {
        @apply(--shadow-elevation-2dp);
        border: none;
        border-radius: 2px;
        padding: 0;
      }

      header {
        align-items: center;
        border-bottom: 1px solid var(--paper-grey-200);
        color: var(--paper-grey-800);
        display: flex;
        justify-content: space-between;
        padding: 12px 20px;
      }

      #main {
        color: var(--paper-grey-800);
        max-width: 800px;
        padding: 20px;
        width: 512px;
      }

      paper-button {
        align-items: center;
        border-radius: 2px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        padding: 8px 12px;
        text-transform: uppercase;
      }

      .file-input {
        display: flex;
      }

      .file-input paper-input {
        flex: 1;
      }

      .file-input paper-button {
        -webkit-margin-start: 10px;
        color: var(--google-blue-500);
      }

      #buttons-container {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
      }

      #confirm {
        -webkit-margin-start: 12px;
        background-color: var(--google-blue-500);
        color: white;
      }
    </style>
    <dialog>
      <header>
        <span>$i18n{packDialogTitle}</span>
        <paper-icon-button id="close-button" icon="close" on-tap="close">
        </paper-icon-button>
      </header>
      <div id="main">
        <div id="description">$i18n{packDialogContent}</div>
        <div class="file-input">
          <paper-input id="root-dir" label="$i18n{packDialogExtensionRoot}"
              value="[[packDirectory_]]">
          </paper-input>
          <paper-button id="root-dir-browse" on-tap="onRootBrowse_">
            $i18n{packDialogBrowse}
          </paper-button>
        </div>
        <div class="file-input">
          <paper-input id="key-file" label="$i18n{packDialogKeyFile}"
              value="[[keyFile_]]">
          </paper-input>
          <paper-button id="key-file-browse" on-tap="onKeyBrowse_">
            $i18n{packDialogBrowse}
          </paper-button>
        </div>
      </div>
      <div id="buttons-container">
        <paper-button id="dismiss" on-tap="close">
          $i18n{packDialogCancel}
        </paper-button>
        <paper-button id="confirm" on-tap="onConfirmTap_">
          $i18n{packDialogConfirm}
        </paper-button>
      </div>
    </dialog>
  </template>
  <script src="chrome://extensions/pack_dialog.js"></script>
</dom-module>