blob: 11c2df2ecd39aea3a702951d2fa87d849f6e463b [file] [log] [blame]
<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-x: hidden;
overflow-y: auto;
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 {
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>