blob: 9048d72470929f4814ad5dff8e94447d02b34570 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<style include="cr-hidden-style">
:host {
--border-bottom-height: 1px;
--button-row-height: calc(2 * var(--padding-top-bottom) +
var(--cr-button-height));
--drawer-transition: 0.3s cubic-bezier(.25, .1, .25, 1);
--padding-top-bottom: 10px;
}
/* This toggle needs special styling because it's on blue background. */
@media (prefers-color-scheme: light) {
cr-toolbar cr-toggle {
--cr-toggle-checked-bar-color: var(--google-grey-refresh-100);
--cr-toggle-checked-button-color: white;
--cr-toggle-checked-ripple-color: rgba(255, 255, 255, .2);
--cr-toggle-unchecked-bar-color: var(--google-grey-600);
--cr-toggle-unchecked-ripple-color: rgba(255, 255, 255, .15);
}
}
cr-tooltip-icon {
margin-inline-end: 20px;
}
#devDrawer[expanded] #buttonStrip {
top: 0;
}
#devDrawer {
background: #fff;
border-bottom: 1px solid var(--google-grey-300);
height: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
transition: height var(--drawer-transition);
}
@media (prefers-color-scheme: dark) {
#devDrawer {
background: none;
border-bottom-color: var(--cr-separator-color);
}
}
#devDrawer[expanded] {
height: calc(var(--button-row-height) + var(--border-bottom-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 cr-button {
margin-inline-end: 16px;
}
.more-actions {
align-items: center;
display: flex;
justify-content: flex-end;
}
.more-actions span {
margin-inline-end: 16px;
}
</style>
<cr-toolbar page-name="$i18n{toolbarTitle}" search-prompt="$i18n{search}"
clear-label="$i18n{clearSearch}" menu-label="$i18n{mainMenu}" show-menu
autofocus narrow-threshold="1000">
<div class="more-actions">
<span id="devModeLabel">$i18n{toolbarDevMode}</span>
<cr-tooltip-icon hidden="[[!shouldDisableDevMode_(
devModeControlledByPolicy, isSupervised)]]"
tooltip-text="[[getTooltipText_(isSupervised)]]"
icon-class="[[getIcon_(isSupervised)]]"
icon-aria-label="[[getTooltipText_(isSupervised)]]">
</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">
<cr-button hidden$="[[!canLoadUnpacked]]" id="loadUnpacked"
on-click="onLoadUnpackedTap_">
$i18n{toolbarLoadUnpacked}
</cr-button>
<cr-button id="packExtensions" on-click="onPackTap_">
$i18n{toolbarPack}
</cr-button>
<cr-button id="updateNow" on-click="onUpdateNowTap_"
title="$i18n{toolbarUpdateNowTooltip}">
$i18n{toolbarUpdateNow}
</cr-button>
<if expr="chromeos">
<cr-button id="kioskExtensions" on-click="onKioskTap_"
hidden$="[[!kioskEnabled]]">
$i18n{manageKioskApp}
</cr-button>
</if>
</div>
</div>
|
