OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @extends {HTMLSpanElement} | 7 * @extends {HTMLSpanElement} |
8 */ | 8 */ |
9 UI.Icon = class extends HTMLSpanElement { | 9 UI.Icon = class extends HTMLSpanElement { |
| 10 /** |
| 11 * @param {!UI.Icon.SpriteSheet} spriteSheet |
| 12 */ |
| 13 static setSpriteSheet(spriteSheet) { |
| 14 UI.Icon._spriteSheet = spriteSheet; |
| 15 } |
| 16 |
10 constructor() { | 17 constructor() { |
11 super(); | 18 super(); |
12 throw new Error('icon must be created via factory method.'); | 19 throw new Error('icon must be created via factory method.'); |
13 } | 20 } |
14 | 21 |
15 /** | 22 /** |
16 * @param {string=} iconType | 23 * @param {string=} iconType |
17 * @param {string=} className | 24 * @param {string=} className |
18 * @return {!UI.Icon} | 25 * @return {!UI.Icon} |
19 */ | 26 */ |
20 static create(iconType, className) { | 27 static create(iconType, className) { |
21 if (!UI.Icon._constructor) | 28 if (!UI.Icon._constructor) |
22 UI.Icon._constructor = UI.registerCustomElement('span', 'ui-icon', UI.Icon
.prototype); | 29 UI.Icon._constructor = UI.registerCustomElement('span', 'ui-icon', UI.Icon
.prototype); |
23 | 30 |
24 var icon = /** @type {!UI.Icon} */ (new UI.Icon._constructor()); | 31 var icon = /** @type {!UI.Icon} */ (new UI.Icon._constructor()); |
| 32 |
25 if (className) | 33 if (className) |
26 icon.className = className; | 34 icon.className = className; |
27 if (iconType) | 35 if (iconType) |
28 icon.setIconType(iconType); | 36 icon.setIconType(iconType); |
29 return icon; | 37 return icon; |
30 } | 38 } |
31 | 39 |
32 /** | 40 /** |
33 * @override | 41 * @override |
34 */ | 42 */ |
35 createdCallback() { | 43 createdCallback() { |
36 /** @type {?UI.Icon.Descriptor} */ | 44 /** @type {?UI.Icon.Descriptor} */ |
37 this._descriptor = null; | 45 this._descriptor = null; |
38 /** @type {string} */ | 46 /** @type {string} */ |
39 this._iconType = ''; | 47 this._iconType = ''; |
| 48 this.style.setProperty('--spritesheet-size', UI.Icon._spriteSheet.size); |
40 } | 49 } |
41 | 50 |
42 /** | 51 /** |
43 * @param {string} iconType | 52 * @param {string} iconType |
44 */ | 53 */ |
45 setIconType(iconType) { | 54 setIconType(iconType) { |
46 if (this._descriptor) { | 55 if (this._descriptor) { |
47 this.style.removeProperty('-webkit-mask-position'); | 56 this.style.removeProperty('--spritesheet-position'); |
48 this.style.removeProperty('background-position'); | |
49 this.style.removeProperty('width'); | 57 this.style.removeProperty('width'); |
50 this.style.removeProperty('height'); | 58 this.style.removeProperty('height'); |
51 this._toggleClasses(false); | 59 this._toggleClasses(false); |
52 this._iconType = ''; | 60 this._iconType = ''; |
53 this._descriptor = null; | 61 this._descriptor = null; |
54 } | 62 } |
55 var descriptor = UI.Icon.Descriptors[iconType] || null; | 63 var descriptor = UI.Icon._spriteSheet.descriptors[iconType] || null; |
56 if (descriptor) { | 64 if (descriptor) { |
57 this._iconType = iconType; | 65 this._iconType = iconType; |
58 this._descriptor = descriptor; | 66 this._descriptor = descriptor; |
59 this.style.setProperty('-webkit-mask-position', this._propertyValue()); | 67 this.style.setProperty('--spritesheet-position', this._propertyValue()); |
60 this.style.setProperty('background-position', this._propertyValue()); | |
61 this.style.setProperty('width', this._descriptor.width + 'px'); | 68 this.style.setProperty('width', this._descriptor.width + 'px'); |
62 this.style.setProperty('height', this._descriptor.height + 'px'); | 69 this.style.setProperty('height', this._descriptor.height + 'px'); |
63 this._toggleClasses(true); | 70 this._toggleClasses(true); |
64 } else if (iconType) { | 71 } else if (iconType) { |
65 throw new Error(`ERROR: failed to find icon descriptor for type: ${iconTyp
e}`); | 72 throw new Error(`ERROR: failed to find icon descriptor for type: ${iconTyp
e}`); |
66 } | 73 } |
67 } | 74 } |
68 | 75 |
69 /** | 76 /** |
70 * @param {boolean} value | 77 * @param {boolean} value |
71 */ | 78 */ |
72 _toggleClasses(value) { | 79 _toggleClasses(value) { |
73 this.classList.toggle('spritesheet-' + this._descriptor.spritesheet, value); | |
74 this.classList.toggle(this._iconType, value); | 80 this.classList.toggle(this._iconType, value); |
75 this.classList.toggle('icon-mask', value && !!this._descriptor.isMask); | 81 this.classList.toggle('icon-mask', value && !!this._descriptor.isMask); |
76 } | 82 } |
77 | 83 |
78 /** | 84 /** |
79 * @return {string} | 85 * @return {string} |
80 */ | 86 */ |
81 _propertyValue() { | 87 _propertyValue() { |
82 return `${this._descriptor.x}px ${this._descriptor.y}px`; | 88 return `${this._descriptor.x}px ${this._descriptor.y}px`; |
83 } | 89 } |
84 }; | 90 }; |
85 | 91 |
86 /** @typedef {{x: number, y: number, width: number, height: number, spritesheet:
string, isMask: (boolean|undefined)}} */ | 92 /** @typedef {{x: number, y: number, width: number, height: number, isMask: (boo
lean|undefined)}} */ |
87 UI.Icon.Descriptor; | 93 UI.Icon.Descriptor; |
88 | 94 |
89 /** @enum {!UI.Icon.Descriptor} */ | 95 /** @typedef {{size: string, descriptors: !Object<string, !UI.Icon.Descriptor>}}
*/ |
90 UI.Icon.Descriptors = { | 96 UI.Icon.SpriteSheet; |
91 'smallicon-error': {x: -20, y: 0, width: 10, height: 10, spritesheet: 'smallic
ons'}, | |
92 'smallicon-warning': {x: -60, y: 0, width: 10, height: 10, spritesheet: 'small
icons'}, | |
93 'smallicon-info': {x: -80, y: 0, width: 10, height: 10, spritesheet: 'smallico
ns'}, | |
94 'smallicon-device': {x: -100, y: 0, width: 10, height: 10, spritesheet: 'small
icons'}, | |
95 'smallicon-red-ball': {x: -120, y: 0, width: 10, height: 10, spritesheet: 'sma
llicons'}, | |
96 'smallicon-green-ball': {x: -140, y: 0, width: 10, height: 10, spritesheet: 's
mallicons'}, | |
97 'smallicon-orange-ball': {x: -160, y: 0, width: 10, height: 10, spritesheet: '
smallicons'}, | |
98 'smallicon-thick-right-arrow': {x: -180, y: 0, width: 10, height: 10, spritesh
eet: 'smallicons'}, | |
99 'smallicon-thick-left-arrow': {x: -180, y: -20, width: 10, height: 10, sprites
heet: 'smallicons'}, | |
100 'smallicon-user-command': {x: 0, y: -19, width: 10, height: 10, spritesheet: '
smallicons'}, | |
101 'smallicon-text-prompt': {x: -20, y: -20, width: 10, height: 10, spritesheet:
'smallicons'}, | |
102 'smallicon-command-result': {x: -40, y: -19, width: 10, height: 10, spriteshee
t: 'smallicons'}, | |
103 'smallicon-shadow': {x: -60, y: -20, width: 10, height: 10, spritesheet: 'smal
licons', isMask: true}, | |
104 'smallicon-bezier': {x: -80, y: -20, width: 10, height: 10, spritesheet: 'smal
licons', isMask: true}, | |
105 'smallicon-dropdown-arrow': {x: -18, y: -96, width: 12, height: 12, spriteshee
t: 'largeicons', isMask: true}, | |
106 'smallicon-triangle-right': {x: -4, y: -98, width: 10, height: 8, spritesheet:
'largeicons', isMask: true}, | |
107 'smallicon-triangle-down': {x: -20, y: -98, width: 10, height: 8, spritesheet:
'largeicons', isMask: true}, | |
108 'smallicon-triangle-up': {x: -4, y: -111, width: 10, height: 8, spritesheet: '
largeicons', isMask: true}, | |
109 'smallicon-arrow-in-circle': {x: -10, y: -127, width: 11, height: 11, spritesh
eet: 'largeicons', isMask: true}, | |
110 'smallicon-cross': {x: -177, y: -98, width: 9, height: 9, spritesheet: 'largei
cons'}, | |
111 'smallicon-red-cross-hover': {x: -96, y: -96, width: 14, height: 14, spriteshe
et: 'largeicons'}, | |
112 'smallicon-red-cross-active': {x: -111, y: -96, width: 14, height: 14, sprites
heet: 'largeicons'}, | |
113 'smallicon-gray-cross-hover': {x: -143, y: -96, width: 13, height: 13, sprites
heet: 'largeicons'}, | |
114 'smallicon-gray-cross-active': {x: -160, y: -96, width: 13, height: 13, sprite
sheet: 'largeicons'}, | |
115 | |
116 'smallicon-inline-breakpoint': {x: -140, y: -20, width: 10, height: 10, sprite
sheet: 'smallicons'}, | |
117 'smallicon-inline-breakpoint-conditional': {x: -160, y: -20, width: 10, height
: 10, spritesheet: 'smallicons'}, | |
118 'smallicon-file': {x: -64, y: -24, width: 12, height: 14, spritesheet: 'largei
cons'}, | |
119 'smallicon-file-sync': {x: -76, y: -24, width: 12, height: 14, spritesheet: 'l
argeicons'}, | |
120 'smallicon-search': {x: -234, y: -30, width: 12, height: 12, spritesheet: 'lar
geicons'}, | |
121 'smallicon-clear-input': {x: -143, y: -96, width: 13, height: 13, spritesheet:
'largeicons'}, | |
122 'smallicon-checkmark': {x: -128, y: -109, width: 10, height: 10, spritesheet:
'largeicons'}, | |
123 | |
124 'largeicon-longclick-triangle': {x: -290, y: -46, width: 28, height: 24, sprit
esheet: 'largeicons', isMask: true}, | |
125 'largeicon-menu': {x: -192, y: -24, width: 28, height: 24, spritesheet: 'large
icons', isMask: true}, | |
126 'largeicon-delete': {x: -128, y: -0, width: 28, height: 24, spritesheet: 'larg
eicons', isMask: true}, | |
127 'largeicon-node-search': {x: -320, y: -120, width: 28, height: 24, spritesheet
: 'largeicons', isMask: true}, | |
128 'largeicon-add': {x: -224, y: -120, width: 28, height: 24, spritesheet: 'large
icons', isMask: true}, | |
129 'largeicon-clear': {x: -64, y: 0, width: 28, height: 24, spritesheet: 'largeic
ons', isMask: true}, | |
130 'largeicon-rotate-screen': {x: -192, y: -144, width: 28, height: 24, spriteshe
et: 'largeicons', isMask: true}, | |
131 'largeicon-phone': {x: -320, y: -96, width: 28, height: 24, spritesheet: 'larg
eicons', isMask: true}, | |
132 'largeicon-block': {x: -32, y: -144, width: 28, height: 24, spritesheet: 'larg
eicons', isMask: true}, | |
133 'largeicon-layout-editor': {x: 0, y: -144, width: 28, height: 24, spritesheet:
'largeicons', isMask: true}, | |
134 'largeicon-foreground-color': {x: -128, y: -144, width: 28, height: 24, sprite
sheet: 'largeicons', isMask: true}, | |
135 'largeicon-background-color': {x: -96, y: -144, width: 28, height: 24, sprites
heet: 'largeicons', isMask: true}, | |
136 'largeicon-text-shadow': {x: -192, y: -48, width: 28, height: 24, spritesheet:
'largeicons', isMask: true}, | |
137 'largeicon-box-shadow': {x: -160, y: -48, width: 28, height: 24, spritesheet:
'largeicons', isMask: true}, | |
138 'largeicon-pause-animation': {x: -320, y: 0, width: 28, height: 24, spriteshee
t: 'largeicons', isMask: true}, | |
139 'largeicon-replay-animation': {x: -320, y: -24, width: 28, height: 24, sprites
heet: 'largeicons', isMask: true}, | |
140 'largeicon-play-animation': {x: -320, y: -48, width: 28, height: 24, spriteshe
et: 'largeicons', isMask: true}, | |
141 'largeicon-eyedropper': {x: -288, y: -120, width: 28, height: 24, spritesheet:
'largeicons', isMask: true}, | |
142 'largeicon-copy': {x: -291, y: -143, width: 28, height: 24, spritesheet: 'larg
eicons', isMask: true}, | |
143 'largeicon-checkmark': {x: -260, y: -71, width: 28, height: 24, spritesheet: '
largeicons', isMask: true}, | |
144 'largeicon-rotate': {x: -160, y: -120, width: 28, height: 24, spritesheet: 'la
rgeicons', isMask: true}, | |
145 'largeicon-center': {x: -128, y: -120, width: 28, height: 24, spritesheet: 'la
rgeicons', isMask: true}, | |
146 'largeicon-pan': {x: -98, y: -120, width: 28, height: 24, spritesheet: 'largei
cons', isMask: true}, | |
147 'largeicon-waterfall': {x: -128, y: -48, width: 28, height: 24, spritesheet: '
largeicons', isMask: true}, | |
148 'largeicon-filter': {x: -32, y: -48, width: 28, height: 24, spritesheet: 'larg
eicons', isMask: true}, | |
149 'largeicon-trash-bin': {x: -128, y: -24, width: 28, height: 24, spritesheet: '
largeicons', isMask: true}, | |
150 'largeicon-pretty-print': {x: -256, y: -24, width: 28, height: 24, spritesheet
: 'largeicons', isMask: true}, | |
151 'largeicon-deactivate-breakpoints': {x: 0, y: -24, width: 28, height: 24, spri
tesheet: 'largeicons', isMask: true}, | |
152 'largeicon-activate-breakpoints': {x: -32, y: 0, width: 28, height: 24, sprite
sheet: 'largeicons', isMask: true}, | |
153 'largeicon-resume': {x: 0, y: -72, width: 28, height: 24, spritesheet: 'largei
cons', isMask: true}, | |
154 'largeicon-pause': {x: -32, y: -72, width: 28, height: 24, spritesheet: 'large
icons', isMask: true}, | |
155 'largeicon-pause-on-exceptions': {x: -256, y: 0, width: 28, height: 24, sprite
sheet: 'largeicons', isMask: true}, | |
156 'largeicon-play-back': {x: -96, y: -48, width: 28, height: 24, spritesheet: 'l
argeicons', isMask: true}, | |
157 'largeicon-play': {x: -64, y: -48, width: 28, height: 24, spritesheet: 'largei
cons', isMask: true}, | |
158 'largeicon-step-over': {x: -128, y: -72, width: 28, height: 24, spritesheet: '
largeicons', isMask: true}, | |
159 'largeicon-step-out': {x: -96, y: -72, width: 28, height: 24, spritesheet: 'la
rgeicons', isMask: true}, | |
160 'largeicon-step-in': {x: -64, y: -72, width: 28, height: 24, spritesheet: 'lar
geicons', isMask: true}, | |
161 'largeicon-camera': {x: -96, y: -24, width: 28, height: 24, spritesheet: 'larg
eicons', isMask: true}, | |
162 'largeicon-stop-recording': {x: -288, y: -24, width: 28, height: 24, spriteshe
et: 'largeicons', isMask: true}, | |
163 'largeicon-start-recording': {x: -288, y: 0, width: 28, height: 24, spriteshee
t: 'largeicons', isMask: true}, | |
164 'largeicon-large-list': {x: -224, y: 0, width: 28, height: 24, spritesheet: 'l
argeicons', isMask: true}, | |
165 'largeicon-visibility': {x: -96, y: 0, width: 28, height: 24, spritesheet: 'la
rgeicons', isMask: true}, | |
166 'largeicon-refresh': {x: 0, y: 0, width: 28, height: 24, spritesheet: 'largeic
ons', isMask: true}, | |
167 'largeicon-dock-to-right': {x: -256, y: -48, width: 28, height: 24, spriteshee
t: 'largeicons', isMask: true}, | |
168 'largeicon-dock-to-left': {x: -224, y: -48, width: 28, height: 24, spritesheet
: 'largeicons', isMask: true}, | |
169 'largeicon-dock-to-bottom': {x: -32, y: -24, width: 28, height: 24, spriteshee
t: 'largeicons', isMask: true}, | |
170 'largeicon-undock': {x: 0, y: -48, width: 28, height: 24, spritesheet: 'largei
cons', isMask: true}, | |
171 'largeicon-settings-gear': {x: -288, y: -72, width: 28, height: 24, spriteshee
t: 'largeicons', isMask: true}, | |
172 | |
173 'largeicon-show-left-sidebar': {x: -160, y: -72, width: 28, height: 24, sprite
sheet: 'largeicons', isMask: true}, | |
174 'largeicon-hide-left-sidebar': {x: -192, y: -72, width: 28, height: 24, sprite
sheet: 'largeicons', isMask: true}, | |
175 'largeicon-show-right-sidebar': {x: -192, y: -96, width: 28, height: 24, sprit
esheet: 'largeicons', isMask: true}, | |
176 'largeicon-hide-right-sidebar': {x: -192, y: -120, width: 28, height: 24, spri
tesheet: 'largeicons', isMask: true}, | |
177 'largeicon-show-top-sidebar': { | |
178 x: -288, | |
179 y: -96, | |
180 width: 28, | |
181 height: 24, | |
182 spritesheet: 'largeicons', | |
183 isMask: true, | |
184 }, | |
185 'largeicon-hide-top-sidebar': { | |
186 x: -256, | |
187 y: -96, | |
188 width: 28, | |
189 height: 24, | |
190 spritesheet: 'largeicons', | |
191 isMask: true, | |
192 }, | |
193 'largeicon-show-bottom-sidebar': { | |
194 x: -224, | |
195 y: -144, | |
196 width: 28, | |
197 height: 24, | |
198 spritesheet: 'largeicons', | |
199 isMask: true, | |
200 }, | |
201 'largeicon-hide-bottom-sidebar': { | |
202 x: -256, | |
203 y: -120, | |
204 width: 28, | |
205 height: 24, | |
206 spritesheet: 'largeicons', | |
207 isMask: true, | |
208 }, | |
209 'largeicon-navigator-file': {x: -224, y: -72, width: 32, height: 24, spriteshe
et: 'largeicons', isMask: true}, | |
210 'largeicon-navigator-file-sync': {x: -160, y: -24, width: 32, height: 24, spri
tesheet: 'largeicons', isMask: true}, | |
211 'badge-navigator-file-sync': {x: -320, y: -72, width: 32, height: 24, spritesh
eet: 'largeicons'}, | |
212 'largeicon-navigator-folder': {x: -64, y: -120, width: 32, height: 24, sprites
heet: 'largeicons', isMask: true}, | |
213 'largeicon-navigator-domain': {x: -160, y: -144, width: 32, height: 24, sprite
sheet: 'largeicons', isMask: true}, | |
214 'largeicon-navigator-frame': {x: -256, y: -144, width: 32, height: 24, sprites
heet: 'largeicons', isMask: true}, | |
215 'largeicon-navigator-worker': {x: -320, y: -144, width: 32, height: 24, sprite
sheet: 'largeicons', isMask: true}, | |
216 'largeicon-navigator-snippet': {x: -224, y: -96, width: 32, height: 24, sprite
sheet: 'largeicons', isMask: true}, | |
217 'largeicon-edit': {x: -160, y: -0, width: 28, height: 24, spritesheet: 'largei
cons'}, | |
218 'largeicon-chevron': {x: -68, y: -143, width: 24, height: 26, spritesheet: 'la
rgeicons', isMask: true}, | |
219 | |
220 'mediumicon-manifest': {x: 0, y: -0, width: 16, height: 16, spritesheet: 'reso
urceicons', isMask: true}, | |
221 'mediumicon-service-worker': {x: -20, y: -0, width: 16, height: 16, spriteshee
t: 'resourceicons', isMask: true}, | |
222 'mediumicon-clear-storage': {x: -40, y: -0, width: 16, height: 16, spritesheet
: 'resourceicons', isMask: true}, | |
223 'mediumicon-database': {x: -60, y: -0, width: 16, height: 16, spritesheet: 're
sourceicons', isMask: true}, | |
224 'mediumicon-table': {x: -80, y: -0, width: 16, height: 16, spritesheet: 'resou
rceicons', isMask: true}, | |
225 'mediumicon-cookie': {x: -120, y: -0, width: 16, height: 16, spritesheet: 'res
ourceicons', isMask: true}, | |
226 }; | |
OLD | NEW |