chrome/browser/resources/md_extensions/toolbar.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.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/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="icons.html">
<link rel="stylesheet" href="chrome://resources/css/md_colors.css">

<dom-module id="extensions-toolbar">
  <template>
    <style include="cr-hidden-style paper-button-style">
      :host {
        --toolbar-width: 580px;
        --toolbar-color: var(--md-toolbar-color);
      }

      cr-toolbar {
        --cr-toolbar-field-width: var(--toolbar-width);
        background: var(--toolbar-color);
      }

      /* This toggle needs special styling because it's on blue background. */
      cr-toolbar cr-toggle {
        --cr-toggle-checked-bar-color: white;
        --cr-toggle-checked-button-color: white;
        --cr-toggle-checked-ink-color: white;
        --cr-toggle-unchecked-ink-color: white;
      }

      .dev-controls {
        background: var(--toolbar-color);
        display: flex;
        justify-content: center;
        width: 100%;
      }

      #button-strip {
        margin-bottom: 4px;
        /* Prevent selection of the blank space between buttons. */
        user-select: none;
        /* We left-align the text of the left button with the left edge of the
           search field. Since the buttons have 12px padding, add 24px to the
           width of the button strip (12px each side) to make centering easy. */
        width: calc(var(--toolbar-width) + 2 * 12px);
      }

      #button-strip paper-button {
        -webkit-margin-end: 16px;
        color: white;
      }

      .more-actions {
        align-items: center;
        display: flex;
        justify-content: flex-end;
      }

      .more-actions span {
        -webkit-margin-end: 16px;
      }
    </style>
    <cr-toolbar page-name="$i18n{toolbarTitle}"
        search-prompt="$i18n{search}"
        clear-label="$i18n{clearSearch}"
        menu-label="$i18n{mainMenu}"
        show-menu="[[!isGuest]]" show-search="[[!isGuest]]">
      <div class="more-actions" hidden$="[[isGuest]]">
        <span id="devModeLabel">$i18n{toolbarDevMode}</span>
        <cr-toggle id="dev-mode" on-change="onDevModeChange_"
            checked="[[inDevMode]]" aria-labelledby="devModeLabel">
        </cr-toggle>
      </div>
    </cr-toolbar>
    <div class="dev-controls" hidden$="[[!inDevMode]]">
      <div id="button-strip">
        <paper-button id="load-unpacked" on-tap="onLoadUnpackedTap_">
          $i18n{toolbarLoadUnpacked}
        </paper-button>
        <paper-button id="pack-extensions" on-tap="onPackTap_">
          $i18n{toolbarPack}
        </paper-button>
        <paper-button id="update-now" on-tap="onUpdateNowTap_"
            title="$i18n{toolbarUpdateNowTooltip}">
          $i18n{toolbarUpdateNow}
        </paper-button>
<if expr="chromeos">
        <paper-button id="kiosk-extensions" on-tap="onKioskTap_"
            hidden$="[[!kioskEnabled]]">
          $i18n{manageKioskApp}
        </paper-button>
</if>
      </div>
    </div>
  </template>
  <script src="toolbar.js"></script>
</dom-module>