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 | |
5 /** | 4 /** |
6 * @constructor | 5 * @unrestricted |
7 * @param {!WebInspector.CSSModel} cssModel | |
8 * @param {?WebInspector.CSSRule} parentRule | |
9 * @param {!CSSAgent.CSSStyle} payload | |
10 * @param {!WebInspector.CSSStyleDeclaration.Type} type | |
11 */ | 6 */ |
12 WebInspector.CSSStyleDeclaration = function(cssModel, parentRule, payload, type) | 7 WebInspector.CSSStyleDeclaration = class { |
13 { | 8 /** |
| 9 * @param {!WebInspector.CSSModel} cssModel |
| 10 * @param {?WebInspector.CSSRule} parentRule |
| 11 * @param {!CSSAgent.CSSStyle} payload |
| 12 * @param {!WebInspector.CSSStyleDeclaration.Type} type |
| 13 */ |
| 14 constructor(cssModel, parentRule, payload, type) { |
14 this._cssModel = cssModel; | 15 this._cssModel = cssModel; |
15 this.parentRule = parentRule; | 16 this.parentRule = parentRule; |
16 this._reinitialize(payload); | 17 this._reinitialize(payload); |
17 this.type = type; | 18 this.type = type; |
| 19 } |
| 20 |
| 21 /** |
| 22 * @param {!WebInspector.CSSModel.Edit} edit |
| 23 */ |
| 24 rebase(edit) { |
| 25 if (this.styleSheetId !== edit.styleSheetId || !this.range) |
| 26 return; |
| 27 if (edit.oldRange.equal(this.range)) { |
| 28 this._reinitialize(/** @type {!CSSAgent.CSSStyle} */ (edit.payload)); |
| 29 } else { |
| 30 this.range = this.range.rebaseAfterTextEdit(edit.oldRange, edit.newRange); |
| 31 for (var i = 0; i < this._allProperties.length; ++i) |
| 32 this._allProperties[i].rebase(edit); |
| 33 } |
| 34 } |
| 35 |
| 36 /** |
| 37 * @param {!CSSAgent.CSSStyle} payload |
| 38 */ |
| 39 _reinitialize(payload) { |
| 40 this.styleSheetId = payload.styleSheetId; |
| 41 this.range = payload.range ? WebInspector.TextRange.fromObject(payload.range
) : null; |
| 42 |
| 43 var shorthandEntries = payload.shorthandEntries; |
| 44 /** @type {!Map.<string, string>} */ |
| 45 this._shorthandValues = new Map(); |
| 46 /** @type {!Set.<string>} */ |
| 47 this._shorthandIsImportant = new Set(); |
| 48 for (var i = 0; i < shorthandEntries.length; ++i) { |
| 49 this._shorthandValues.set(shorthandEntries[i].name, shorthandEntries[i].va
lue); |
| 50 if (shorthandEntries[i].important) |
| 51 this._shorthandIsImportant.add(shorthandEntries[i].name); |
| 52 } |
| 53 |
| 54 this._allProperties = []; |
| 55 for (var i = 0; i < payload.cssProperties.length; ++i) { |
| 56 var property = WebInspector.CSSProperty.parsePayload(this, i, payload.cssP
roperties[i]); |
| 57 this._allProperties.push(property); |
| 58 } |
| 59 |
| 60 this._generateSyntheticPropertiesIfNeeded(); |
| 61 this._computeInactiveProperties(); |
| 62 |
| 63 this._activePropertyMap = new Map(); |
| 64 for (var property of this._allProperties) { |
| 65 if (!property.activeInStyle()) |
| 66 continue; |
| 67 this._activePropertyMap.set(property.name, property); |
| 68 } |
| 69 |
| 70 this.cssText = payload.cssText; |
| 71 this._leadingProperties = null; |
| 72 } |
| 73 |
| 74 _generateSyntheticPropertiesIfNeeded() { |
| 75 if (this.range) |
| 76 return; |
| 77 |
| 78 if (!this._shorthandValues.size) |
| 79 return; |
| 80 |
| 81 var propertiesSet = new Set(); |
| 82 for (var property of this._allProperties) |
| 83 propertiesSet.add(property.name); |
| 84 |
| 85 var generatedProperties = []; |
| 86 // For style-based properties, generate shorthands with values when possible
. |
| 87 for (var property of this._allProperties) { |
| 88 // For style-based properties, try generating shorthands. |
| 89 var shorthands = WebInspector.cssMetadata().shorthands(property.name) || [
]; |
| 90 for (var shorthand of shorthands) { |
| 91 if (propertiesSet.has(shorthand)) |
| 92 continue; // There already is a shorthand this longhands falls under. |
| 93 var shorthandValue = this._shorthandValues.get(shorthand); |
| 94 if (!shorthandValue) |
| 95 continue; // Never generate synthetic shorthands when no value is ava
ilable. |
| 96 |
| 97 // Generate synthetic shorthand we have a value for. |
| 98 var shorthandImportance = !!this._shorthandIsImportant.has(shorthand); |
| 99 var shorthandProperty = new WebInspector.CSSProperty( |
| 100 this, this.allProperties.length, shorthand, shorthandValue, shorthan
dImportance, false, true, false); |
| 101 generatedProperties.push(shorthandProperty); |
| 102 propertiesSet.add(shorthand); |
| 103 } |
| 104 } |
| 105 this._allProperties = this._allProperties.concat(generatedProperties); |
| 106 } |
| 107 |
| 108 /** |
| 109 * @return {!Array.<!WebInspector.CSSProperty>} |
| 110 */ |
| 111 _computeLeadingProperties() { |
| 112 /** |
| 113 * @param {!WebInspector.CSSProperty} property |
| 114 * @return {boolean} |
| 115 */ |
| 116 function propertyHasRange(property) { |
| 117 return !!property.range; |
| 118 } |
| 119 |
| 120 if (this.range) |
| 121 return this._allProperties.filter(propertyHasRange); |
| 122 |
| 123 var leadingProperties = []; |
| 124 for (var property of this._allProperties) { |
| 125 var shorthands = WebInspector.cssMetadata().shorthands(property.name) || [
]; |
| 126 var belongToAnyShorthand = false; |
| 127 for (var shorthand of shorthands) { |
| 128 if (this._shorthandValues.get(shorthand)) { |
| 129 belongToAnyShorthand = true; |
| 130 break; |
| 131 } |
| 132 } |
| 133 if (!belongToAnyShorthand) |
| 134 leadingProperties.push(property); |
| 135 } |
| 136 |
| 137 return leadingProperties; |
| 138 } |
| 139 |
| 140 /** |
| 141 * @return {!Array.<!WebInspector.CSSProperty>} |
| 142 */ |
| 143 leadingProperties() { |
| 144 if (!this._leadingProperties) |
| 145 this._leadingProperties = this._computeLeadingProperties(); |
| 146 return this._leadingProperties; |
| 147 } |
| 148 |
| 149 /** |
| 150 * @return {!WebInspector.Target} |
| 151 */ |
| 152 target() { |
| 153 return this._cssModel.target(); |
| 154 } |
| 155 |
| 156 /** |
| 157 * @return {!WebInspector.CSSModel} |
| 158 */ |
| 159 cssModel() { |
| 160 return this._cssModel; |
| 161 } |
| 162 |
| 163 _computeInactiveProperties() { |
| 164 var activeProperties = {}; |
| 165 for (var i = 0; i < this._allProperties.length; ++i) { |
| 166 var property = this._allProperties[i]; |
| 167 if (property.disabled || !property.parsedOk) { |
| 168 property._setActive(false); |
| 169 continue; |
| 170 } |
| 171 var canonicalName = WebInspector.cssMetadata().canonicalPropertyName(prope
rty.name); |
| 172 var activeProperty = activeProperties[canonicalName]; |
| 173 if (!activeProperty) { |
| 174 activeProperties[canonicalName] = property; |
| 175 } else if (!activeProperty.important || property.important) { |
| 176 activeProperty._setActive(false); |
| 177 activeProperties[canonicalName] = property; |
| 178 } else { |
| 179 property._setActive(false); |
| 180 } |
| 181 } |
| 182 } |
| 183 |
| 184 get allProperties() { |
| 185 return this._allProperties; |
| 186 } |
| 187 |
| 188 /** |
| 189 * @param {string} name |
| 190 * @return {string} |
| 191 */ |
| 192 getPropertyValue(name) { |
| 193 var property = this._activePropertyMap.get(name); |
| 194 return property ? property.value : ''; |
| 195 } |
| 196 |
| 197 /** |
| 198 * @param {string} name |
| 199 * @return {boolean} |
| 200 */ |
| 201 isPropertyImplicit(name) { |
| 202 var property = this._activePropertyMap.get(name); |
| 203 return property ? property.implicit : ''; |
| 204 } |
| 205 |
| 206 /** |
| 207 * @param {string} name |
| 208 * @return {!Array.<!WebInspector.CSSProperty>} |
| 209 */ |
| 210 longhandProperties(name) { |
| 211 var longhands = WebInspector.cssMetadata().longhands(name); |
| 212 var result = []; |
| 213 for (var i = 0; longhands && i < longhands.length; ++i) { |
| 214 var property = this._activePropertyMap.get(longhands[i]); |
| 215 if (property) |
| 216 result.push(property); |
| 217 } |
| 218 return result; |
| 219 } |
| 220 |
| 221 /** |
| 222 * @param {number} index |
| 223 * @return {?WebInspector.CSSProperty} |
| 224 */ |
| 225 propertyAt(index) { |
| 226 return (index < this.allProperties.length) ? this.allProperties[index] : nul
l; |
| 227 } |
| 228 |
| 229 /** |
| 230 * @return {number} |
| 231 */ |
| 232 pastLastSourcePropertyIndex() { |
| 233 for (var i = this.allProperties.length - 1; i >= 0; --i) { |
| 234 if (this.allProperties[i].range) |
| 235 return i + 1; |
| 236 } |
| 237 return 0; |
| 238 } |
| 239 |
| 240 /** |
| 241 * @param {number} index |
| 242 * @return {!WebInspector.TextRange} |
| 243 */ |
| 244 _insertionRange(index) { |
| 245 var property = this.propertyAt(index); |
| 246 return property && property.range ? property.range.collapseToStart() : this.
range.collapseToEnd(); |
| 247 } |
| 248 |
| 249 /** |
| 250 * @param {number=} index |
| 251 * @return {!WebInspector.CSSProperty} |
| 252 */ |
| 253 newBlankProperty(index) { |
| 254 index = (typeof index === 'undefined') ? this.pastLastSourcePropertyIndex()
: index; |
| 255 var property = |
| 256 new WebInspector.CSSProperty(this, index, '', '', false, false, true, fa
lse, '', this._insertionRange(index)); |
| 257 return property; |
| 258 } |
| 259 |
| 260 /** |
| 261 * @param {string} text |
| 262 * @param {boolean} majorChange |
| 263 * @return {!Promise.<boolean>} |
| 264 */ |
| 265 setText(text, majorChange) { |
| 266 return this._cssModel.setStyleText(this.styleSheetId, this.range, text, majo
rChange); |
| 267 } |
| 268 |
| 269 /** |
| 270 * @param {number} index |
| 271 * @param {string} name |
| 272 * @param {string} value |
| 273 * @param {function(boolean)=} userCallback |
| 274 */ |
| 275 insertPropertyAt(index, name, value, userCallback) { |
| 276 this.newBlankProperty(index).setText(name + ': ' + value + ';', false, true)
.then(userCallback); |
| 277 } |
| 278 |
| 279 /** |
| 280 * @param {string} name |
| 281 * @param {string} value |
| 282 * @param {function(boolean)=} userCallback |
| 283 */ |
| 284 appendProperty(name, value, userCallback) { |
| 285 this.insertPropertyAt(this.allProperties.length, name, value, userCallback); |
| 286 } |
18 }; | 287 }; |
19 | 288 |
20 /** @enum {string} */ | 289 /** @enum {string} */ |
21 WebInspector.CSSStyleDeclaration.Type = { | 290 WebInspector.CSSStyleDeclaration.Type = { |
22 Regular: "Regular", | 291 Regular: 'Regular', |
23 Inline: "Inline", | 292 Inline: 'Inline', |
24 Attributes: "Attributes" | 293 Attributes: 'Attributes' |
25 }; | 294 }; |
26 | |
27 WebInspector.CSSStyleDeclaration.prototype = { | |
28 /** | |
29 * @param {!WebInspector.CSSModel.Edit} edit | |
30 */ | |
31 rebase: function(edit) | |
32 { | |
33 if (this.styleSheetId !== edit.styleSheetId || !this.range) | |
34 return; | |
35 if (edit.oldRange.equal(this.range)) { | |
36 this._reinitialize(/** @type {!CSSAgent.CSSStyle} */(edit.payload)); | |
37 } else { | |
38 this.range = this.range.rebaseAfterTextEdit(edit.oldRange, edit.newR
ange); | |
39 for (var i = 0; i < this._allProperties.length; ++i) | |
40 this._allProperties[i].rebase(edit); | |
41 } | |
42 }, | |
43 | |
44 /** | |
45 * @param {!CSSAgent.CSSStyle} payload | |
46 */ | |
47 _reinitialize: function(payload) | |
48 { | |
49 this.styleSheetId = payload.styleSheetId; | |
50 this.range = payload.range ? WebInspector.TextRange.fromObject(payload.r
ange) : null; | |
51 | |
52 var shorthandEntries = payload.shorthandEntries; | |
53 /** @type {!Map.<string, string>} */ | |
54 this._shorthandValues = new Map(); | |
55 /** @type {!Set.<string>} */ | |
56 this._shorthandIsImportant = new Set(); | |
57 for (var i = 0; i < shorthandEntries.length; ++i) { | |
58 this._shorthandValues.set(shorthandEntries[i].name, shorthandEntries
[i].value); | |
59 if (shorthandEntries[i].important) | |
60 this._shorthandIsImportant.add(shorthandEntries[i].name); | |
61 } | |
62 | |
63 this._allProperties = []; | |
64 for (var i = 0; i < payload.cssProperties.length; ++i) { | |
65 var property = WebInspector.CSSProperty.parsePayload(this, i, payloa
d.cssProperties[i]); | |
66 this._allProperties.push(property); | |
67 } | |
68 | |
69 this._generateSyntheticPropertiesIfNeeded(); | |
70 this._computeInactiveProperties(); | |
71 | |
72 this._activePropertyMap = new Map(); | |
73 for (var property of this._allProperties) { | |
74 if (!property.activeInStyle()) | |
75 continue; | |
76 this._activePropertyMap.set(property.name, property); | |
77 } | |
78 | |
79 this.cssText = payload.cssText; | |
80 this._leadingProperties = null; | |
81 }, | |
82 | |
83 _generateSyntheticPropertiesIfNeeded: function() | |
84 { | |
85 if (this.range) | |
86 return; | |
87 | |
88 if (!this._shorthandValues.size) | |
89 return; | |
90 | |
91 var propertiesSet = new Set(); | |
92 for (var property of this._allProperties) | |
93 propertiesSet.add(property.name); | |
94 | |
95 var generatedProperties = []; | |
96 // For style-based properties, generate shorthands with values when poss
ible. | |
97 for (var property of this._allProperties) { | |
98 // For style-based properties, try generating shorthands. | |
99 var shorthands = WebInspector.cssMetadata().shorthands(property.name
) || []; | |
100 for (var shorthand of shorthands) { | |
101 if (propertiesSet.has(shorthand)) | |
102 continue; // There already is a shorthand this longhands fa
lls under. | |
103 var shorthandValue = this._shorthandValues.get(shorthand); | |
104 if (!shorthandValue) | |
105 continue; // Never generate synthetic shorthands when no va
lue is available. | |
106 | |
107 // Generate synthetic shorthand we have a value for. | |
108 var shorthandImportance = !!this._shorthandIsImportant.has(short
hand); | |
109 var shorthandProperty = new WebInspector.CSSProperty(this, this.
allProperties.length, shorthand, shorthandValue, shorthandImportance, false, tru
e, false); | |
110 generatedProperties.push(shorthandProperty); | |
111 propertiesSet.add(shorthand); | |
112 } | |
113 } | |
114 this._allProperties = this._allProperties.concat(generatedProperties); | |
115 }, | |
116 | |
117 /** | |
118 * @return {!Array.<!WebInspector.CSSProperty>} | |
119 */ | |
120 _computeLeadingProperties: function() | |
121 { | |
122 /** | |
123 * @param {!WebInspector.CSSProperty} property | |
124 * @return {boolean} | |
125 */ | |
126 function propertyHasRange(property) | |
127 { | |
128 return !!property.range; | |
129 } | |
130 | |
131 if (this.range) | |
132 return this._allProperties.filter(propertyHasRange); | |
133 | |
134 var leadingProperties = []; | |
135 for (var property of this._allProperties) { | |
136 var shorthands = WebInspector.cssMetadata().shorthands(property.name
) || []; | |
137 var belongToAnyShorthand = false; | |
138 for (var shorthand of shorthands) { | |
139 if (this._shorthandValues.get(shorthand)) { | |
140 belongToAnyShorthand = true; | |
141 break; | |
142 } | |
143 } | |
144 if (!belongToAnyShorthand) | |
145 leadingProperties.push(property); | |
146 } | |
147 | |
148 return leadingProperties; | |
149 }, | |
150 | |
151 /** | |
152 * @return {!Array.<!WebInspector.CSSProperty>} | |
153 */ | |
154 leadingProperties: function() | |
155 { | |
156 if (!this._leadingProperties) | |
157 this._leadingProperties = this._computeLeadingProperties(); | |
158 return this._leadingProperties; | |
159 }, | |
160 | |
161 /** | |
162 * @return {!WebInspector.Target} | |
163 */ | |
164 target: function() | |
165 { | |
166 return this._cssModel.target(); | |
167 }, | |
168 | |
169 /** | |
170 * @return {!WebInspector.CSSModel} | |
171 */ | |
172 cssModel: function() | |
173 { | |
174 return this._cssModel; | |
175 }, | |
176 | |
177 _computeInactiveProperties: function() | |
178 { | |
179 var activeProperties = {}; | |
180 for (var i = 0; i < this._allProperties.length; ++i) { | |
181 var property = this._allProperties[i]; | |
182 if (property.disabled || !property.parsedOk) { | |
183 property._setActive(false); | |
184 continue; | |
185 } | |
186 var canonicalName = WebInspector.cssMetadata().canonicalPropertyName
(property.name); | |
187 var activeProperty = activeProperties[canonicalName]; | |
188 if (!activeProperty) { | |
189 activeProperties[canonicalName] = property; | |
190 } else if (!activeProperty.important || property.important) { | |
191 activeProperty._setActive(false); | |
192 activeProperties[canonicalName] = property; | |
193 } else { | |
194 property._setActive(false); | |
195 } | |
196 } | |
197 }, | |
198 | |
199 get allProperties() | |
200 { | |
201 return this._allProperties; | |
202 }, | |
203 | |
204 /** | |
205 * @param {string} name | |
206 * @return {string} | |
207 */ | |
208 getPropertyValue: function(name) | |
209 { | |
210 var property = this._activePropertyMap.get(name); | |
211 return property ? property.value : ""; | |
212 }, | |
213 | |
214 /** | |
215 * @param {string} name | |
216 * @return {boolean} | |
217 */ | |
218 isPropertyImplicit: function(name) | |
219 { | |
220 var property = this._activePropertyMap.get(name); | |
221 return property ? property.implicit : ""; | |
222 }, | |
223 | |
224 /** | |
225 * @param {string} name | |
226 * @return {!Array.<!WebInspector.CSSProperty>} | |
227 */ | |
228 longhandProperties: function(name) | |
229 { | |
230 var longhands = WebInspector.cssMetadata().longhands(name); | |
231 var result = []; | |
232 for (var i = 0; longhands && i < longhands.length; ++i) { | |
233 var property = this._activePropertyMap.get(longhands[i]); | |
234 if (property) | |
235 result.push(property); | |
236 } | |
237 return result; | |
238 }, | |
239 | |
240 /** | |
241 * @param {number} index | |
242 * @return {?WebInspector.CSSProperty} | |
243 */ | |
244 propertyAt: function(index) | |
245 { | |
246 return (index < this.allProperties.length) ? this.allProperties[index] :
null; | |
247 }, | |
248 | |
249 /** | |
250 * @return {number} | |
251 */ | |
252 pastLastSourcePropertyIndex: function() | |
253 { | |
254 for (var i = this.allProperties.length - 1; i >= 0; --i) { | |
255 if (this.allProperties[i].range) | |
256 return i + 1; | |
257 } | |
258 return 0; | |
259 }, | |
260 | |
261 /** | |
262 * @param {number} index | |
263 * @return {!WebInspector.TextRange} | |
264 */ | |
265 _insertionRange: function(index) | |
266 { | |
267 var property = this.propertyAt(index); | |
268 return property && property.range ? property.range.collapseToStart() : t
his.range.collapseToEnd(); | |
269 }, | |
270 | |
271 /** | |
272 * @param {number=} index | |
273 * @return {!WebInspector.CSSProperty} | |
274 */ | |
275 newBlankProperty: function(index) | |
276 { | |
277 index = (typeof index === "undefined") ? this.pastLastSourcePropertyInde
x() : index; | |
278 var property = new WebInspector.CSSProperty(this, index, "", "", false,
false, true, false, "", this._insertionRange(index)); | |
279 return property; | |
280 }, | |
281 | |
282 /** | |
283 * @param {string} text | |
284 * @param {boolean} majorChange | |
285 * @return {!Promise.<boolean>} | |
286 */ | |
287 setText: function(text, majorChange) | |
288 { | |
289 return this._cssModel.setStyleText(this.styleSheetId, this.range, text,
majorChange); | |
290 }, | |
291 | |
292 /** | |
293 * @param {number} index | |
294 * @param {string} name | |
295 * @param {string} value | |
296 * @param {function(boolean)=} userCallback | |
297 */ | |
298 insertPropertyAt: function(index, name, value, userCallback) | |
299 { | |
300 this.newBlankProperty(index).setText(name + ": " + value + ";", false, t
rue) | |
301 .then(userCallback); | |
302 }, | |
303 | |
304 /** | |
305 * @param {string} name | |
306 * @param {string} value | |
307 * @param {function(boolean)=} userCallback | |
308 */ | |
309 appendProperty: function(name, value, userCallback) | |
310 { | |
311 this.insertPropertyAt(this.allProperties.length, name, value, userCallba
ck); | |
312 } | |
313 }; | |
OLD | NEW |