| 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 |