| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.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/cr_elements/policy/cr_tooltip_icon.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_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/html/util.html"> |
| <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| <link rel="import" href="icons.html"> |
| <link rel="import" href="pack_dialog.html"> |
| |
| <dom-module id="extensions-toolbar"> |
| <template> |
| <style include="cr-hidden-style paper-button-style"> |
| :host { |
| /* The constant is the height of the tallest control. */ |
| --button-row-height: calc(2 * var(--padding-top-bottom) + 36px); |
| --drawer-transition: 0.3s cubic-bezier(.25, .1, .25, 1); |
| --padding-top-bottom: 8px; |
| --toolbar-color: var(--md-toolbar-color); |
| } |
| |
| cr-toolbar { |
| background: var(--toolbar-color); |
| } |
| |
| /* This toggle needs special styling because it's on blue background. */ |
| cr-toolbar cr-toggle { |
| --cr-toggle-checked-bar-color: var(--google-grey-refresh-100); |
| --cr-toggle-checked-button-color: white; |
| --cr-toggle-checked-ink-color: white; |
| --cr-toggle-unchecked-bar-color: var(--google-grey-600); |
| --cr-toggle-unchecked-ink-color: white; |
| } |
| |
| cr-tooltip-icon { |
| margin-inline-end: 20px; |
| } |
| |
| #devDrawer[expanded] #buttonStrip { |
| top: 0; |
| } |
| |
| #devDrawer { |
| background: white; |
| border-bottom: 1px solid var(--google-grey-300); |
| box-sizing: border-box; |
| height: 0; |
| overflow: hidden; |
| position: relative; |
| transition: height var(--drawer-transition); |
| } |
| |
| #devDrawer[expanded] { |
| height: var(--button-row-height); |
| } |
| |
| #buttonStrip { |
| margin-inline-end: auto; |
| margin-inline-start: 24px; |
| padding: var(--padding-top-bottom) 0; |
| position: absolute; |
| top: calc(var(--button-row-height) * -1); |
| transition: top var(--drawer-transition); |
| /* Prevent selection of the blank space between buttons. */ |
| user-select: none; |
| width: 100%; |
| } |
| |
| #buttonStrip paper-button { |
| margin-inline-end: 16px; |
| } |
| |
| .more-actions { |
| align-items: center; |
| display: flex; |
| justify-content: flex-end; |
| } |
| |
| .more-actions span { |
| margin-inline-end: 16px; |
| } |
| |
| cr-toast > div { |
| color: #fff; |
| display: flex; |
| flex: 1; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| </style> |
| <cr-toolbar page-name="$i18n{toolbarTitle}" search-prompt="$i18n{search}" |
| clear-label="$i18n{clearSearch}" menu-label="$i18n{mainMenu}" show-menu |
| narrow-threshold="1000"> |
| <div class="more-actions"> |
| <span id="devModeLabel">$i18n{toolbarDevMode}</span> |
| <cr-tooltip-icon hidden$="[[!devModeControlledByPolicy]]" |
| tooltip-text="$i18n{controlledSettingPolicy}" |
| icon-class="cr20:domain" |
| icon-aria-label="$i18n{controlledSettingPolicy}"> |
| </cr-tooltip-icon> |
| <cr-toggle id="devMode" on-change="onDevModeToggleChange_" |
| disabled="[[shouldDisableDevMode_( |
| devModeControlledByPolicy, isSupervised)]]" |
| checked="[[inDevMode]]" aria-labelledby="devModeLabel"> |
| </cr-toggle> |
| </div> |
| </cr-toolbar> |
| <template is="dom-if" if="[[showPackDialog_]]" restamp> |
| <extensions-pack-dialog delegate="[[delegate]]" |
| on-close="onPackDialogClose_"> |
| </extensions-pack-dialog> |
| </template> |
| <div id="devDrawer" expanded$="[[expanded_]]"> |
| <div id="buttonStrip"> |
| <paper-button hidden$="[[!canLoadUnpacked]]" id="loadUnpacked" |
| on-click="onLoadUnpackedTap_"> |
| $i18n{toolbarLoadUnpacked} |
| </paper-button> |
| <paper-button id="packExtensions" on-click="onPackTap_"> |
| $i18n{toolbarPack} |
| </paper-button> |
| <paper-button id="updateNow" on-click="onUpdateNowTap_" |
| title="$i18n{toolbarUpdateNowTooltip}"> |
| $i18n{toolbarUpdateNow} |
| </paper-button> |
| <if expr="chromeos"> |
| <paper-button id="kioskExtensions" on-click="onKioskTap_" |
| hidden$="[[!kioskEnabled]]"> |
| $i18n{manageKioskApp} |
| </paper-button> |
| </if> |
| </div> |
| </div> |
| <cr-toast> |
| <div>[[toastLabel_]]</div> |
| </cr-toast> |
| </template> |
| <script src="toolbar.js"></script> |
| </dom-module> |