Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(244)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/ui/Icon.js

Issue 2775733002: DevTools: minor cleanup for the icons (Closed)
Patch Set: Created 3 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 constructor() { 10 constructor() {
(...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after
112 'smallicon-red-cross-hover': {x: -96, y: -96, width: 14, height: 14, spriteshe et: 'largeicons'}, 112 'smallicon-red-cross-hover': {x: -96, y: -96, width: 14, height: 14, spriteshe et: 'largeicons'},
113 'smallicon-red-cross-active': {x: -111, y: -96, width: 14, height: 14, sprites heet: 'largeicons'}, 113 'smallicon-red-cross-active': {x: -111, y: -96, width: 14, height: 14, sprites heet: 'largeicons'},
114 'smallicon-gray-cross-hover': {x: -143, y: -96, width: 13, height: 13, sprites heet: 'largeicons'}, 114 'smallicon-gray-cross-hover': {x: -143, y: -96, width: 13, height: 13, sprites heet: 'largeicons'},
115 'smallicon-gray-cross-active': {x: -160, y: -96, width: 13, height: 13, sprite sheet: 'largeicons'}, 115 'smallicon-gray-cross-active': {x: -160, y: -96, width: 13, height: 13, sprite sheet: 'largeicons'},
116 116
117 'smallicon-inline-breakpoint': {x: -140, y: -20, width: 10, height: 10, sprite sheet: 'smallicons'}, 117 'smallicon-inline-breakpoint': {x: -140, y: -20, width: 10, height: 10, sprite sheet: 'smallicons'},
118 'smallicon-inline-breakpoint-conditional': {x: -160, y: -20, width: 10, height : 10, spritesheet: 'smallicons'}, 118 'smallicon-inline-breakpoint-conditional': {x: -160, y: -20, width: 10, height : 10, spritesheet: 'smallicons'},
119 'smallicon-file': {x: -64, y: -24, width: 12, height: 14, spritesheet: 'largei cons'}, 119 'smallicon-file': {x: -64, y: -24, width: 12, height: 14, spritesheet: 'largei cons'},
120 'smallicon-file-sync': {x: -76, y: -24, width: 12, height: 14, spritesheet: 'l argeicons'}, 120 'smallicon-file-sync': {x: -76, y: -24, width: 12, height: 14, spritesheet: 'l argeicons'},
121 'smallicon-search': {x: -234, y: -30, width: 12, height: 12, spritesheet: 'lar geicons'}, 121 'smallicon-search': {x: -234, y: -30, width: 12, height: 12, spritesheet: 'lar geicons'},
122 'smallicon-clear-input': {x: -143, y: -96, width: 13, height: 13, spritesheet: 'largeicons'},
123 'smallicon-checkmark': {x: -128, y: -109, width: 10, height: 10, spritesheet: 'largeicons'}, 122 'smallicon-checkmark': {x: -128, y: -109, width: 10, height: 10, spritesheet: 'largeicons'},
124 123
125 'largeicon-longclick-triangle': {x: -290, y: -46, width: 28, height: 24, sprit esheet: 'largeicons', isMask: true}, 124 'largeicon-longclick-triangle': {x: -290, y: -46, width: 28, height: 24, sprit esheet: 'largeicons', isMask: true},
126 'largeicon-menu': {x: -192, y: -24, width: 28, height: 24, spritesheet: 'large icons', isMask: true}, 125 'largeicon-menu': {x: -192, y: -24, width: 28, height: 24, spritesheet: 'large icons', isMask: true},
127 'largeicon-delete': {x: -128, y: -0, width: 28, height: 24, spritesheet: 'larg eicons', isMask: true}, 126 'largeicon-delete': {x: -128, y: -0, width: 28, height: 24, spritesheet: 'larg eicons', isMask: true},
128 'largeicon-node-search': {x: -320, y: -120, width: 28, height: 24, spritesheet : 'largeicons', isMask: true}, 127 'largeicon-node-search': {x: -320, y: -120, width: 28, height: 24, spritesheet : 'largeicons', isMask: true},
129 'largeicon-add': {x: -224, y: -120, width: 28, height: 24, spritesheet: 'large icons', isMask: true}, 128 'largeicon-add': {x: -224, y: -120, width: 28, height: 24, spritesheet: 'large icons', isMask: true},
130 'largeicon-clear': {x: -64, y: 0, width: 28, height: 24, spritesheet: 'largeic ons', isMask: true}, 129 'largeicon-clear': {x: -64, y: 0, width: 28, height: 24, spritesheet: 'largeic ons', isMask: true},
131 'largeicon-rotate-screen': {x: -192, y: -144, width: 28, height: 24, spriteshe et: 'largeicons', isMask: true}, 130 'largeicon-rotate-screen': {x: -192, y: -144, width: 28, height: 24, spriteshe et: 'largeicons', isMask: true},
132 'largeicon-phone': {x: -320, y: -96, width: 28, height: 24, spritesheet: 'larg eicons', isMask: true}, 131 'largeicon-phone': {x: -320, y: -96, width: 28, height: 24, spritesheet: 'larg eicons', isMask: true},
133 'largeicon-block': {x: -32, y: -144, width: 28, height: 24, spritesheet: 'larg eicons', isMask: true},
134 'largeicon-layout-editor': {x: 0, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true}, 132 'largeicon-layout-editor': {x: 0, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
135 'largeicon-foreground-color': {x: -128, y: -144, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true}, 133 'largeicon-foreground-color': {x: -128, y: -144, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true},
136 'largeicon-background-color': {x: -96, y: -144, width: 28, height: 24, sprites heet: 'largeicons', isMask: true}, 134 'largeicon-background-color': {x: -96, y: -144, width: 28, height: 24, sprites heet: 'largeicons', isMask: true},
137 'largeicon-text-shadow': {x: -192, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true}, 135 'largeicon-text-shadow': {x: -192, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
138 'largeicon-box-shadow': {x: -160, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true}, 136 'largeicon-box-shadow': {x: -160, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
139 'largeicon-pause-animation': {x: -320, y: 0, width: 28, height: 24, spriteshee t: 'largeicons', isMask: true}, 137 'largeicon-pause-animation': {x: -320, y: 0, width: 28, height: 24, spriteshee t: 'largeicons', isMask: true},
140 'largeicon-replay-animation': {x: -320, y: -24, width: 28, height: 24, sprites heet: 'largeicons', isMask: true}, 138 'largeicon-replay-animation': {x: -320, y: -24, width: 28, height: 24, sprites heet: 'largeicons', isMask: true},
141 'largeicon-play-animation': {x: -320, y: -48, width: 28, height: 24, spriteshe et: 'largeicons', isMask: true}, 139 'largeicon-play-animation': {x: -320, y: -48, width: 28, height: 24, spriteshe et: 'largeicons', isMask: true},
142 'largeicon-eyedropper': {x: -288, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true}, 140 'largeicon-eyedropper': {x: -288, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
143 'largeicon-copy': {x: -291, y: -143, width: 28, height: 24, spritesheet: 'larg eicons', isMask: true}, 141 'largeicon-copy': {x: -291, y: -143, width: 28, height: 24, spritesheet: 'larg eicons', isMask: true},
(...skipping 24 matching lines...) Expand all
168 'largeicon-dock-to-right': {x: -256, y: -48, width: 28, height: 24, spriteshee t: 'largeicons', isMask: true}, 166 'largeicon-dock-to-right': {x: -256, y: -48, width: 28, height: 24, spriteshee t: 'largeicons', isMask: true},
169 'largeicon-dock-to-left': {x: -224, y: -48, width: 28, height: 24, spritesheet : 'largeicons', isMask: true}, 167 'largeicon-dock-to-left': {x: -224, y: -48, width: 28, height: 24, spritesheet : 'largeicons', isMask: true},
170 'largeicon-dock-to-bottom': {x: -32, y: -24, width: 28, height: 24, spriteshee t: 'largeicons', isMask: true}, 168 'largeicon-dock-to-bottom': {x: -32, y: -24, width: 28, height: 24, spriteshee t: 'largeicons', isMask: true},
171 'largeicon-undock': {x: 0, y: -48, width: 28, height: 24, spritesheet: 'largei cons', isMask: true}, 169 'largeicon-undock': {x: 0, y: -48, width: 28, height: 24, spritesheet: 'largei cons', isMask: true},
172 'largeicon-settings-gear': {x: -288, y: -72, width: 28, height: 24, spriteshee t: 'largeicons', isMask: true}, 170 'largeicon-settings-gear': {x: -288, y: -72, width: 28, height: 24, spriteshee t: 'largeicons', isMask: true},
173 171
174 'largeicon-show-left-sidebar': {x: -160, y: -72, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true}, 172 'largeicon-show-left-sidebar': {x: -160, y: -72, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true},
175 'largeicon-hide-left-sidebar': {x: -192, y: -72, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true}, 173 'largeicon-hide-left-sidebar': {x: -192, y: -72, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true},
176 'largeicon-show-right-sidebar': {x: -192, y: -96, width: 28, height: 24, sprit esheet: 'largeicons', isMask: true}, 174 'largeicon-show-right-sidebar': {x: -192, y: -96, width: 28, height: 24, sprit esheet: 'largeicons', isMask: true},
177 'largeicon-hide-right-sidebar': {x: -192, y: -120, width: 28, height: 24, spri tesheet: 'largeicons', isMask: true}, 175 'largeicon-hide-right-sidebar': {x: -192, y: -120, width: 28, height: 24, spri tesheet: 'largeicons', isMask: true},
178 'largeicon-show-top-sidebar': { 176 'largeicon-show-top-sidebar': {x: -288, y: -96, width: 28, height: 24, sprites heet: 'largeicons', isMask: true},
179 x: -288, 177 'largeicon-hide-top-sidebar': {x: -256, y: -96, width: 28, height: 24, sprites heet: 'largeicons', isMask: true},
180 y: -96, 178 'largeicon-show-bottom-sidebar': {x: -224, y: -144, width: 28, height: 24, spr itesheet: 'largeicons', isMask: true},
181 width: 28, 179 'largeicon-hide-bottom-sidebar': {x: -256, y: -120, width: 28, height: 24, spr itesheet: 'largeicons', isMask: true},
182 height: 24,
183 spritesheet: 'largeicons',
184 isMask: true,
185 },
186 'largeicon-hide-top-sidebar': {
187 x: -256,
188 y: -96,
189 width: 28,
190 height: 24,
191 spritesheet: 'largeicons',
192 isMask: true,
193 },
194 'largeicon-show-bottom-sidebar': {
195 x: -224,
196 y: -144,
197 width: 28,
198 height: 24,
199 spritesheet: 'largeicons',
200 isMask: true,
201 },
202 'largeicon-hide-bottom-sidebar': {
203 x: -256,
204 y: -120,
205 width: 28,
206 height: 24,
207 spritesheet: 'largeicons',
208 isMask: true,
209 },
210 'largeicon-navigator-file': {x: -226, y: -72, width: 28, height: 24, spriteshe et: 'largeicons', isMask: true}, 180 'largeicon-navigator-file': {x: -226, y: -72, width: 28, height: 24, spriteshe et: 'largeicons', isMask: true},
211 'largeicon-navigator-file-sync': {x: -162, y: -24, width: 28, height: 24, spri tesheet: 'largeicons', isMask: true}, 181 'largeicon-navigator-file-sync': {x: -162, y: -24, width: 28, height: 24, spri tesheet: 'largeicons', isMask: true},
212 'badge-navigator-file-sync': {x: -322, y: -72, width: 28, height: 24, spritesh eet: 'largeicons'}, 182 'badge-navigator-file-sync': {x: -322, y: -72, width: 28, height: 24, spritesh eet: 'largeicons'},
213 'largeicon-navigator-folder': {x: -66, y: -120, width: 28, height: 24, sprites heet: 'largeicons', isMask: true}, 183 'largeicon-navigator-folder': {x: -66, y: -120, width: 28, height: 24, sprites heet: 'largeicons', isMask: true},
214 'largeicon-navigator-domain': {x: -162, y: -144, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true}, 184 'largeicon-navigator-domain': {x: -162, y: -144, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true},
215 'largeicon-navigator-frame': {x: -258, y: -144, width: 28, height: 24, sprites heet: 'largeicons', isMask: true}, 185 'largeicon-navigator-frame': {x: -258, y: -144, width: 28, height: 24, sprites heet: 'largeicons', isMask: true},
216 'largeicon-navigator-worker': {x: -322, y: -144, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true}, 186 'largeicon-navigator-worker': {x: -322, y: -144, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true},
217 'largeicon-navigator-snippet': {x: -226, y: -96, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true}, 187 'largeicon-navigator-snippet': {x: -226, y: -96, width: 28, height: 24, sprite sheet: 'largeicons', isMask: true},
218 'largeicon-edit': {x: -160, y: -0, width: 28, height: 24, spritesheet: 'largei cons', isMask: true}, 188 'largeicon-edit': {x: -160, y: -0, width: 28, height: 24, spritesheet: 'largei cons', isMask: true},
219 'largeicon-chevron': {x: -68, y: -143, width: 24, height: 26, spritesheet: 'la rgeicons', isMask: true}, 189 'largeicon-chevron': {x: -68, y: -143, width: 28, height: 24, spritesheet: 'la rgeicons', isMask: true},
dgozman 2017/03/24 16:53:59 Don't you have to adjust the usages? Or is it magi
lushnikov 2017/03/24 16:55:11 It is Magically placed :)
220 190
221 'mediumicon-manifest': {x: 0, y: -0, width: 16, height: 16, spritesheet: 'reso urceicons', isMask: true}, 191 'mediumicon-manifest': {x: 0, y: -0, width: 16, height: 16, spritesheet: 'reso urceicons', isMask: true},
222 'mediumicon-service-worker': {x: -20, y: -0, width: 16, height: 16, spriteshee t: 'resourceicons', isMask: true}, 192 'mediumicon-service-worker': {x: -20, y: -0, width: 16, height: 16, spriteshee t: 'resourceicons', isMask: true},
223 'mediumicon-clear-storage': {x: -40, y: -0, width: 16, height: 16, spritesheet : 'resourceicons', isMask: true}, 193 'mediumicon-clear-storage': {x: -40, y: -0, width: 16, height: 16, spritesheet : 'resourceicons', isMask: true},
224 'mediumicon-database': {x: -60, y: -0, width: 16, height: 16, spritesheet: 're sourceicons', isMask: true}, 194 'mediumicon-database': {x: -60, y: -0, width: 16, height: 16, spritesheet: 're sourceicons', isMask: true},
225 'mediumicon-table': {x: -80, y: -0, width: 16, height: 16, spritesheet: 'resou rceicons', isMask: true}, 195 'mediumicon-table': {x: -80, y: -0, width: 16, height: 16, spritesheet: 'resou rceicons', isMask: true},
226 'mediumicon-cookie': {x: -120, y: -0, width: 16, height: 16, spritesheet: 'res ourceicons', isMask: true}, 196 'mediumicon-cookie': {x: -120, y: -0, width: 16, height: 16, spritesheet: 'res ourceicons', isMask: true},
227 197
228 'mediumicon-arrow-top': {x: 0, y: 0, width: 19, height: 19, spritesheet: 'arro wicons'}, 198 'mediumicon-arrow-top': {x: 0, y: 0, width: 19, height: 19, spritesheet: 'arro wicons'},
229 'mediumicon-arrow-bottom': {x: 0, y: -19, width: 19, height: 19, spritesheet: 'arrowicons'}, 199 'mediumicon-arrow-bottom': {x: 0, y: -19, width: 19, height: 19, spritesheet: 'arrowicons'},
230 'mediumicon-arrow-left': {x: 0, y: -38, width: 19, height: 19, spritesheet: 'a rrowicons'}, 200 'mediumicon-arrow-left': {x: 0, y: -38, width: 19, height: 19, spritesheet: 'a rrowicons'},
231 'mediumicon-arrow-right': {x: 0, y: -57, width: 19, height: 19, spritesheet: ' arrowicons'}, 201 'mediumicon-arrow-right': {x: 0, y: -57, width: 19, height: 19, spritesheet: ' arrowicons'},
232 }; 202 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698