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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
|
// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @constructor
* @extends {HTMLSpanElement}
*/
UI.Icon = class extends HTMLSpanElement {
constructor() {
super();
throw new Error('icon must be created via factory method.');
}
/**
* @param {string=} iconType
* @param {string=} className
* @return {!UI.Icon}
*/
static create(iconType, className) {
if (!UI.Icon._constructor)
UI.Icon._constructor = UI.registerCustomElement('span', 'ui-icon', UI.Icon.prototype);
var icon = /** @type {!UI.Icon} */ (new UI.Icon._constructor());
if (className)
icon.className = className;
if (iconType)
icon.setIconType(iconType);
return icon;
}
/**
* @override
*/
createdCallback() {
/** @type {?UI.Icon.Descriptor} */
this._descriptor = null;
/** @type {string} */
this._iconType = '';
}
/**
* @param {string} iconType
*/
setIconType(iconType) {
if (this._descriptor) {
this.style.removeProperty('-webkit-mask-position');
this.style.removeProperty('background-position');
this.style.removeProperty('width');
this.style.removeProperty('height');
this.style.removeProperty('transform');
this._toggleClasses(false);
this._iconType = '';
this._descriptor = null;
}
var descriptor = UI.Icon.Descriptors[iconType] || null;
if (descriptor) {
this._iconType = iconType;
this._descriptor = descriptor;
this.style.setProperty('-webkit-mask-position', this._propertyValue());
this.style.setProperty('background-position', this._propertyValue());
this.style.setProperty('width', this._descriptor.width + 'px');
this.style.setProperty('height', this._descriptor.height + 'px');
if (this._descriptor.transform)
this.style.setProperty('transform', this._descriptor.transform);
this._toggleClasses(true);
} else if (iconType) {
throw new Error(`ERROR: failed to find icon descriptor for type: ${iconType}`);
}
}
/**
* @param {boolean} value
*/
_toggleClasses(value) {
this.classList.toggle('spritesheet-' + this._descriptor.spritesheet, value);
this.classList.toggle(this._iconType, value);
this.classList.toggle('icon-mask', value && !!this._descriptor.isMask);
}
/**
* @return {string}
*/
_propertyValue() {
return `${this._descriptor.x}px ${this._descriptor.y}px`;
}
};
/** @typedef {{x: number, y: number, width: number, height: number, spritesheet: string, isMask: (boolean|undefined)}} */
UI.Icon.Descriptor;
/** @enum {!UI.Icon.Descriptor} */
UI.Icon.Descriptors = {
'smallicon-error': {x: -20, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-warning': {x: -60, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-info': {x: -80, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-device': {x: -100, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-red-ball': {x: -120, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-green-ball': {x: -140, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-orange-ball': {x: -160, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-thick-right-arrow': {x: -180, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-thick-left-arrow':
{x: -180, y: 0, width: 10, height: 10, spritesheet: 'smallicons', transform: 'rotate(180deg)'},
'smallicon-user-command': {x: 0, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-text-prompt': {x: -20, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-command-result': {x: -40, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-shadow': {x: -60, y: -20, width: 10, height: 10, spritesheet: 'smallicons', isMask: true},
'smallicon-bezier': {x: -80, y: -20, width: 10, height: 10, spritesheet: 'smallicons', isMask: true},
'smallicon-dropdown-arrow': {x: -18, y: -96, width: 12, height: 12, spritesheet: 'largeicons', isMask: true},
'smallicon-triangle-right': {x: -4, y: -98, width: 10, height: 8, spritesheet: 'largeicons', isMask: true},
'smallicon-triangle-bottom': {x: -20, y: -98, width: 10, height: 8, spritesheet: 'largeicons', isMask: true},
'smallicon-arrow-in-circle': {x: -10, y: -127, width: 11, height: 11, spritesheet: 'largeicons', isMask: true},
'smallicon-cross': {x: -177, y: -98, width: 10, height: 10, spritesheet: 'largeicons'},
'smallicon-inline-breakpoint': {x: -140, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-inline-breakpoint-conditional': {x: -160, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
'smallicon-file': {x: -64, y: -24, width: 12, height: 14, spritesheet: 'largeicons'},
'smallicon-file-sync': {x: -76, y: -24, width: 12, height: 14, spritesheet: 'largeicons'},
'largeicon-longclick-triangle': {x: -290, y: -46, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-menu': {x: -192, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-delete': {x: -128, y: -0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-node-search': {x: -320, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-add': {x: -224, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-clear': {x: -64, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-rotate-screen': {x: -192, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-phone': {x: -320, y: -96, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-block': {x: -32, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-layout-editor': {x: 0, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-foreground-color': {x: -128, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-background-color': {x: -96, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-text-shadow': {x: -192, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-box-shadow': {x: -160, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-pause-animation': {x: -320, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-replay-animation': {x: -320, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-play-animation': {x: -320, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-eyedropper': {x: -288, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-copy': {x: -291, y: -143, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-checkmark': {x: -260, y: -71, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-rotate': {x: -160, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-center': {x: -128, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-pan': {x: -98, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-waterfall': {x: -128, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-filter': {x: -32, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-trash-bin': {x: -128, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-pretty-print': {x: -256, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-deactivate-breakpoints': {x: 0, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-activate-breakpoints': {x: -32, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-resume': {x: 0, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-pause': {x: -32, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-pause-on-exceptions': {x: -256, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-play-back':
{x: -64, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'scaleX(-1)'},
'largeicon-play': {x: -64, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-step-over': {x: -128, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-step-out': {x: -96, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-step-in': {x: -64, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-camera': {x: -96, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-stop-recording': {x: -288, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-start-recording': {x: -288, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-large-list': {x: -224, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-visibility': {x: -96, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-refresh': {x: 0, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-dock-to-right': {x: -256, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-dock-to-bottom': {x: -32, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-undock': {x: 0, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-settings-gear': {x: -288, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-show-left-sidebar': {x: -160, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-hide-left-sidebar': {x: -192, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-show-right-sidebar':
{x: -160, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'rotate(180deg)'},
'largeicon-hide-right-sidebar':
{x: -192, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'rotate(180deg)'},
'largeicon-show-top-sidebar': {
x: -160,
y: -72,
width: 28,
height: 24,
spritesheet: 'largeicons',
isMask: true,
transform: 'translate(4px, 0) rotate(90deg)'
},
'largeicon-hide-top-sidebar': {
x: -192,
y: -72,
width: 28,
height: 24,
spritesheet: 'largeicons',
isMask: true,
transform: 'translate(4px, 1px) rotate(90deg)'
},
'largeicon-show-bottom-sidebar': {
x: -160,
y: -72,
width: 28,
height: 24,
spritesheet: 'largeicons',
isMask: true,
transform: 'translate(4px, 0) rotate(-90deg)'
},
'largeicon-hide-bottom-sidebar': {
x: -192,
y: -72,
width: 28,
height: 24,
spritesheet: 'largeicons',
isMask: true,
transform: 'translate(4px, 1px) rotate(-90deg)'
},
'largeicon-navigator-file': {x: -224, y: -72, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-navigator-file-sync': {x: -160, y: -24, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
'badge-navigator-file-sync': {x: -320, y: -72, width: 32, height: 24, spritesheet: 'largeicons'},
'largeicon-navigator-folder': {x: -64, y: -120, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-navigator-domain': {x: -160, y: -144, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-navigator-frame': {x: -256, y: -144, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-navigator-worker': {x: -320, y: -144, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
'largeicon-navigator-snippet': {x: -224, y: -96, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
};
|
