chrome/browser/resources/md_downloads/toolbar.html

<link rel="import" href="chrome://downloads/action_service.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/html/util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu-button/paper-menu-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">

<dom-module id="downloads-toolbar">
  <template>
    <style>
      :host {
        align-items: center;
        background: var(--md-toolbar-color);
        color: white;
        display: flex;
        min-height: 56px;
      }

      [hidden] {
        display: none !important;
      }

      #toolbar {
        --cr-toolbar-field-end-padding: 0;
        --cr-toolbar-field-width: var(--downloads-card-width);
        --cr-toolbar-header-wide: {
          -webkit-margin-start: 24px;
          -webkit-margin-end: 16px;  /* Only matters around 900px in Russian. */
        };
        --cr-toolbar-left-content-wide: {
          -webkit-margin-start: 0;
          flex: 1 0 1px;
          max-width: none;
          position: static;
        };
        --cr-toolbar-right-content-wide: {
          flex: 1 0 1px;
          position: static;
        };
        align-items: center;
        flex: 1;
      }

      paper-icon-button {
        --iron-icon-height: 20px;
        --iron-icon-width: 20px;
        --paper-icon-button: {
          height: 32px;
          padding: 6px;
          width: 32px;
        };
      }

      .more-actions {
        -webkit-margin-end: 16px;
        -webkit-margin-start: 8px;
        text-align: end;
      }

      #more {
        --paper-menu-button: {
          padding: 0;
        };
      }

      paper-menu {
        --paper-menu-selected-item: {
          font-weight: normal;
        };
      }

      paper-item {
        -webkit-user-select: none;
        cursor: pointer;
        font: inherit;
        min-height: 40px;
        /* TODO(michaelpg): fix this for everybody ever.
         * https://github.com/PolymerElements/paper-menu-button/issues/56 */
        white-space: nowrap;
      }
    </style>
    <cr-toolbar id="toolbar" page-name="$i18n{title}"
        search-prompt="$i18n{search}" clear-label="$i18n{clearSearch}"
        spinner-active="{{spinnerActive}}" on-search-changed="onSearchChanged_">
      <div class="more-actions">
        <paper-menu-button id="more" horizontal-align="right"
            allow-outside-scroll>
          <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}"
               class="dropdown-trigger"></paper-icon-button>
          <paper-menu class="dropdown-content">
            <paper-item class="clear-all" on-tap="onClearAllTap_"
                on-blur="onItemBlur_">
              $i18n{clearAll}
            </paper-item>
            <paper-item on-tap="onOpenDownloadsFolderTap_"
                on-blur="onItemBlur_">
              $i18n{openDownloadsFolder}
            </paper-item>
          </paper-menu>
        </paper-menu-button>
      </div>
    </cr-toolbar>
  </template>
  <script src="chrome://downloads/toolbar.js"></script>
</dom-module>