OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2007 Apple Inc. All rights reserved. | 2 * Copyright (C) 2007 Apple Inc. All rights reserved. |
| 3 * Copyright (C) 2009 Joseph Pecoraro |
3 * | 4 * |
4 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions | 6 * modification, are permitted provided that the following conditions |
6 * are met: | 7 * are met: |
7 * | 8 * |
8 * 1. Redistributions of source code must retain the above copyright | 9 * 1. Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 10 * notice, this list of conditions and the following disclaimer. |
10 * 2. Redistributions in binary form must reproduce the above copyright | 11 * 2. Redistributions in binary form must reproduce the above copyright |
11 * notice, this list of conditions and the following disclaimer in the | 12 * notice, this list of conditions and the following disclaimer in the |
12 * documentation and/or other materials provided with the distribution. | 13 * documentation and/or other materials provided with the distribution. |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
55 | 56 |
56 var body = this.bodyElement; | 57 var body = this.bodyElement; |
57 if (!refresh || !node) { | 58 if (!refresh || !node) { |
58 body.removeChildren(); | 59 body.removeChildren(); |
59 this.sections = []; | 60 this.sections = []; |
60 } | 61 } |
61 | 62 |
62 if (!node) | 63 if (!node) |
63 return; | 64 return; |
64 | 65 |
| 66 var self = this; |
| 67 var callback = function(styles) { |
| 68 if (!styles) |
| 69 return; |
| 70 node._setStyles(styles.computedStyle, styles.inlineStyle, styles.sty
leAttributes, styles.matchedCSSRules); |
| 71 self._update(refresh, body, node, editedSection, forceUpdate); |
| 72 }; |
| 73 InspectorController.getStyles(node.id, !Preferences.showUserAgentStyles,
callback); |
| 74 }, |
| 75 |
| 76 _update: function(refresh, body, node, editedSection, forceUpdate) |
| 77 { |
| 78 if (!refresh) { |
| 79 body.removeChildren(); |
| 80 this.sections = []; |
| 81 } |
| 82 |
65 var styleRules = []; | 83 var styleRules = []; |
66 | 84 |
67 if (refresh) { | 85 if (refresh) { |
68 for (var i = 0; i < this.sections.length; ++i) { | 86 for (var i = 0; i < this.sections.length; ++i) { |
69 var section = this.sections[i]; | 87 var section = this.sections[i]; |
| 88 if (section._blank) |
| 89 continue; |
70 if (section.computedStyle) | 90 if (section.computedStyle) |
71 section.styleRule.style = node.ownerDocument.defaultView.get
ComputedStyle(node); | 91 section.styleRule.style = node.ownerDocument.defaultView.get
ComputedStyle(node); |
72 var styleRule = { section: section, style: section.styleRule.sty
le, computedStyle: section.computedStyle }; | 92 var styleRule = { section: section, style: section.styleRule.sty
le, computedStyle: section.computedStyle, rule: section.rule }; |
73 styleRules.push(styleRule); | 93 styleRules.push(styleRule); |
74 } | 94 } |
75 } else { | 95 } else { |
76 var computedStyle = node.ownerDocument.defaultView.getComputedStyle(
node); | 96 var computedStyle = node.ownerDocument.defaultView.getComputedStyle(
node); |
77 styleRules.push({ computedStyle: true, selectorText: WebInspector.UI
String("Computed Style"), style: computedStyle, editable: false }); | 97 styleRules.push({ computedStyle: true, selectorText: WebInspector.UI
String("Computed Style"), style: computedStyle, editable: false }); |
78 | 98 |
79 var nodeName = node.nodeName.toLowerCase(); | 99 var nodeName = node.nodeName.toLowerCase(); |
80 for (var i = 0; i < node.attributes.length; ++i) { | 100 for (var i = 0; i < node.attributes.length; ++i) { |
81 var attr = node.attributes[i]; | 101 var attr = node.attributes[i]; |
82 if (attr.style) { | 102 if (attr.style) { |
83 var attrStyle = { style: attr.style, editable: false }; | 103 var attrStyle = { style: attr.style, editable: false }; |
84 attrStyle.subtitle = WebInspector.UIString("element’s “%s” a
ttribute", attr.name); | 104 attrStyle.subtitle = WebInspector.UIString("element’s “%s” a
ttribute", attr.name); |
85 attrStyle.selectorText = nodeName + "[" + attr.name; | 105 attrStyle.selectorText = nodeName + "[" + attr.name; |
86 if (attr.value.length) | 106 if (attr.value.length) |
87 attrStyle.selectorText += "=" + attr.value; | 107 attrStyle.selectorText += "=" + attr.value; |
88 attrStyle.selectorText += "]"; | 108 attrStyle.selectorText += "]"; |
89 styleRules.push(attrStyle); | 109 styleRules.push(attrStyle); |
90 } | 110 } |
91 } | 111 } |
92 | 112 |
93 if (node.style && (node.style.length || Object.hasProperties(node.st
yle.__disabledProperties))) { | 113 // Always Show element's Style Attributes |
94 var inlineStyle = { selectorText: WebInspector.UIString("Inline
Style Attribute"), style: node.style }; | 114 if (node.nodeType === Node.ELEMENT_NODE) { |
| 115 var inlineStyle = { selectorText: WebInspector.UIString("Style A
ttribute"), style: node.style, isAttribute: true }; |
95 inlineStyle.subtitle = WebInspector.UIString("element’s “%s” att
ribute", "style"); | 116 inlineStyle.subtitle = WebInspector.UIString("element’s “%s” att
ribute", "style"); |
96 styleRules.push(inlineStyle); | 117 styleRules.push(inlineStyle); |
97 } | 118 } |
98 | 119 |
99 var matchedStyleRules = node.ownerDocument.defaultView.getMatchedCSS
Rules(node, "", !Preferences.showUserAgentStyles); | 120 var matchedStyleRules = node.ownerDocument.defaultView.getMatchedCSS
Rules(node, "", !Preferences.showUserAgentStyles); |
100 if (matchedStyleRules) { | 121 if (matchedStyleRules) { |
101 // Add rules in reverse order to match the cascade order. | 122 // Add rules in reverse order to match the cascade order. |
102 for (var i = (matchedStyleRules.length - 1); i >= 0; --i) { | 123 for (var i = (matchedStyleRules.length - 1); i >= 0; --i) { |
103 var rule = matchedStyleRules[i]; | 124 var rule = matchedStyleRules[i]; |
104 styleRules.push({ style: rule.style, selectorText: rule.sele
ctorText, parentStyleSheet: rule.parentStyleSheet }); | 125 styleRules.push({ style: rule.style, selectorText: rule.sele
ctorText, parentStyleSheet: rule.parentStyleSheet, rule: rule }); |
105 } | 126 } |
106 } | 127 } |
107 } | 128 } |
108 | 129 |
109 function deleteDisabledProperty(style, name) | 130 function deleteDisabledProperty(style, name) |
110 { | 131 { |
111 if (!style || !name) | 132 if (!style || !name) |
112 return; | 133 return; |
113 if (style.__disabledPropertyValues) | 134 if (style.__disabledPropertyValues) |
114 delete style.__disabledPropertyValues[name]; | 135 delete style.__disabledPropertyValues[name]; |
115 if (style.__disabledPropertyPriorities) | 136 if (style.__disabledPropertyPriorities) |
116 delete style.__disabledPropertyPriorities[name]; | 137 delete style.__disabledPropertyPriorities[name]; |
117 if (style.__disabledProperties) | 138 if (style.__disabledProperties) |
118 delete style.__disabledProperties[name]; | 139 delete style.__disabledProperties[name]; |
119 } | 140 } |
120 | 141 |
121 var usedProperties = {}; | 142 var usedProperties = {}; |
122 var disabledComputedProperties = {}; | 143 var disabledComputedProperties = {}; |
123 var priorityUsed = false; | 144 var priorityUsed = false; |
124 | 145 |
125 // Walk the style rules and make a list of all used and overloaded prope
rties. | 146 // Walk the style rules and make a list of all used and overloaded prope
rties. |
126 for (var i = 0; i < styleRules.length; ++i) { | 147 for (var i = 0; i < styleRules.length; ++i) { |
127 var styleRule = styleRules[i]; | 148 var styleRule = styleRules[i]; |
128 if (styleRule.computedStyle) | 149 if (styleRule.computedStyle) |
129 continue; | 150 continue; |
| 151 if (styleRule.section && styleRule.section.noAffect) |
| 152 continue; |
130 | 153 |
131 styleRule.usedProperties = {}; | 154 styleRule.usedProperties = {}; |
132 | 155 |
133 var style = styleRule.style; | 156 var style = styleRule.style; |
134 for (var j = 0; j < style.length; ++j) { | 157 for (var j = 0; j < style.length; ++j) { |
135 var name = style[j]; | 158 var name = style[j]; |
136 | 159 |
137 if (!priorityUsed && style.getPropertyPriority(name).length) | 160 if (!priorityUsed && style.getPropertyPriority(name).length) |
138 priorityUsed = true; | 161 priorityUsed = true; |
139 | 162 |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
174 if (priorityUsed) { | 197 if (priorityUsed) { |
175 // Walk the properties again and account for !important. | 198 // Walk the properties again and account for !important. |
176 var foundPriorityProperties = []; | 199 var foundPriorityProperties = []; |
177 | 200 |
178 // Walk in reverse to match the order !important overrides. | 201 // Walk in reverse to match the order !important overrides. |
179 for (var i = (styleRules.length - 1); i >= 0; --i) { | 202 for (var i = (styleRules.length - 1); i >= 0; --i) { |
180 if (styleRules[i].computedStyle) | 203 if (styleRules[i].computedStyle) |
181 continue; | 204 continue; |
182 | 205 |
183 var style = styleRules[i].style; | 206 var style = styleRules[i].style; |
184 var uniqueProperties = getUniqueStyleProperties(style); | 207 var uniqueProperties = style.uniqueStyleProperties; |
185 for (var j = 0; j < uniqueProperties.length; ++j) { | 208 for (var j = 0; j < uniqueProperties.length; ++j) { |
186 var name = uniqueProperties[j]; | 209 var name = uniqueProperties[j]; |
187 if (style.getPropertyPriority(name).length) { | 210 if (style.getPropertyPriority(name).length) { |
188 if (!(name in foundPriorityProperties)) | 211 if (!(name in foundPriorityProperties)) |
189 styleRules[i].usedProperties[name] = true; | 212 styleRules[i].usedProperties[name] = true; |
190 else | 213 else |
191 delete styleRules[i].usedProperties[name]; | 214 delete styleRules[i].usedProperties[name]; |
192 foundPriorityProperties[name] = true; | 215 foundPriorityProperties[name] = true; |
193 } else if (name in foundPriorityProperties) | 216 } else if (name in foundPriorityProperties) |
194 delete styleRules[i].usedProperties[name]; | 217 delete styleRules[i].usedProperties[name]; |
(...skipping 20 matching lines...) Expand all Loading... |
215 | 238 |
216 var computedStyle = styleRule.computedStyle; | 239 var computedStyle = styleRule.computedStyle; |
217 delete styleRule.computedStyle; | 240 delete styleRule.computedStyle; |
218 | 241 |
219 var ruleUsedProperties = styleRule.usedProperties; | 242 var ruleUsedProperties = styleRule.usedProperties; |
220 delete styleRule.usedProperties; | 243 delete styleRule.usedProperties; |
221 | 244 |
222 var editable = styleRule.editable; | 245 var editable = styleRule.editable; |
223 delete styleRule.editable; | 246 delete styleRule.editable; |
224 | 247 |
| 248 var isAttribute = styleRule.isAttribute; |
| 249 delete styleRule.isAttribute; |
| 250 |
225 // Default editable to true if it was omitted. | 251 // Default editable to true if it was omitted. |
226 if (typeof editable === "undefined") | 252 if (typeof editable === "undefined") |
227 editable = true; | 253 editable = true; |
228 | 254 |
229 var section = new WebInspector.StylePropertiesSection(styleRule,
subtitle, computedStyle, (ruleUsedProperties || usedProperties), editable); | 255 var section = new WebInspector.StylePropertiesSection(styleRule,
subtitle, computedStyle, (ruleUsedProperties || usedProperties), editable); |
230 if (computedStyle) | 256 if (computedStyle) |
231 section.disabledComputedProperties = disabledComputedPropert
ies; | 257 section.disabledComputedProperties = disabledComputedPropert
ies; |
232 section.pane = this; | 258 section.pane = this; |
233 | 259 |
234 if (Preferences.styleRulesExpandedState && section.identifier in
Preferences.styleRulesExpandedState) | 260 if (Preferences.styleRulesExpandedState && section.identifier in
Preferences.styleRulesExpandedState) |
235 section.expanded = Preferences.styleRulesExpandedState[secti
on.identifier]; | 261 section.expanded = Preferences.styleRulesExpandedState[secti
on.identifier]; |
236 else if (computedStyle) | 262 else if (computedStyle) |
237 section.collapse(true); | 263 section.collapse(true); |
| 264 else if (isAttribute && styleRule.style.length === 0) |
| 265 section.collapse(true); |
238 else | 266 else |
239 section.expand(true); | 267 section.expand(true); |
240 | 268 |
241 body.appendChild(section.element); | 269 body.appendChild(section.element); |
242 this.sections.push(section); | 270 this.sections.push(section); |
243 } | 271 } |
| 272 |
| 273 this.addBlankSection(); |
244 } | 274 } |
| 275 }, |
| 276 |
| 277 addBlankSection: function() |
| 278 { |
| 279 var blankSection = new WebInspector.BlankStylePropertiesSection(); |
| 280 blankSection.pane = this; |
| 281 |
| 282 this.bodyElement.insertBefore(blankSection.element, this.bodyElement.fir
stChild.nextSibling.nextSibling); // 0 is computed, 1 is element.style |
| 283 var computed = this.sections.shift(); |
| 284 var elementStyle = this.sections.shift(); |
| 285 this.sections.unshift(blankSection); |
| 286 this.sections.unshift(elementStyle); |
| 287 this.sections.unshift(computed); |
| 288 }, |
| 289 |
| 290 appropriateSelectorForNode: function() |
| 291 { |
| 292 var node = this.node; |
| 293 if (!node) |
| 294 return; |
| 295 |
| 296 var id = node.getAttribute("id"); |
| 297 if (id) |
| 298 return "#" + id; |
| 299 |
| 300 var className = node.getAttribute("class"); |
| 301 if (className) |
| 302 return "." + className.replace(/\s+/, "."); |
| 303 |
| 304 var nodeName = node.nodeName.toLowerCase(); |
| 305 if (nodeName === "input" && node.getAttribute("type")) |
| 306 return nodeName + "[type=\"" + node.getAttribute("type") + "\"]"; |
| 307 |
| 308 return nodeName; |
245 } | 309 } |
246 } | 310 } |
247 | 311 |
248 WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.pr
ototype; | 312 WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.pr
ototype; |
249 | 313 |
250 WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyl
e, usedProperties, editable) | 314 WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyl
e, usedProperties, editable) |
251 { | 315 { |
252 WebInspector.PropertiesSection.call(this, styleRule.selectorText); | 316 WebInspector.PropertiesSection.call(this, styleRule.selectorText); |
| 317 this.titleElement.addEventListener("click", function(e) { e.stopPropagation(
); }, false); |
| 318 this.titleElement.addEventListener("dblclick", this._dblclickSelector.bind(t
his), false); |
| 319 this.element.addEventListener("dblclick", this._dblclickEmptySpace.bind(this
), false); |
253 | 320 |
254 this.styleRule = styleRule; | 321 this.styleRule = styleRule; |
| 322 this.rule = this.styleRule.rule; |
255 this.computedStyle = computedStyle; | 323 this.computedStyle = computedStyle; |
256 this.editable = (editable && !computedStyle); | 324 this.editable = (editable && !computedStyle); |
257 | 325 |
258 // Prevent editing the user agent and user rules. | 326 // Prevent editing the user agent and user rules. |
259 var isUserAgent = this.styleRule.parentStyleSheet && !this.styleRule.parentS
tyleSheet.ownerNode && !this.styleRule.parentStyleSheet.href; | 327 var isUserAgent = this.rule && this.rule.isUserAgent; |
260 var isUser = this.styleRule.parentStyleSheet && this.styleRule.parentStyleSh
eet.ownerNode && this.styleRule.parentStyleSheet.ownerNode.nodeName == '#documen
t'; | 328 var isUser = this.rule && this.rule.isUser; |
| 329 var isViaInspector = this.rule && this.rule.isViaInspector; |
| 330 |
261 if (isUserAgent || isUser) | 331 if (isUserAgent || isUser) |
262 this.editable = false; | 332 this.editable = false; |
263 | 333 |
264 this._usedProperties = usedProperties; | 334 this._usedProperties = usedProperties; |
265 | 335 |
266 if (computedStyle) { | 336 if (computedStyle) { |
267 this.element.addStyleClass("computed-style"); | 337 this.element.addStyleClass("computed-style"); |
268 | 338 |
269 if (Preferences.showInheritedComputedStyleProperties) | 339 if (Preferences.showInheritedComputedStyleProperties) |
270 this.element.addStyleClass("show-inherited"); | 340 this.element.addStyleClass("show-inherited"); |
(...skipping 21 matching lines...) Expand all Loading... |
292 } else { | 362 } else { |
293 if (!subtitle) { | 363 if (!subtitle) { |
294 if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleShe
et.href) { | 364 if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleShe
et.href) { |
295 var url = this.styleRule.parentStyleSheet.href; | 365 var url = this.styleRule.parentStyleSheet.href; |
296 subtitle = WebInspector.linkifyURL(url, WebInspector.displayName
ForURL(url)); | 366 subtitle = WebInspector.linkifyURL(url, WebInspector.displayName
ForURL(url)); |
297 this.subtitleElement.addStyleClass("file"); | 367 this.subtitleElement.addStyleClass("file"); |
298 } else if (isUserAgent) | 368 } else if (isUserAgent) |
299 subtitle = WebInspector.UIString("user agent stylesheet"); | 369 subtitle = WebInspector.UIString("user agent stylesheet"); |
300 else if (isUser) | 370 else if (isUser) |
301 subtitle = WebInspector.UIString("user stylesheet"); | 371 subtitle = WebInspector.UIString("user stylesheet"); |
| 372 else if (isViaInspector) |
| 373 subtitle = WebInspector.UIString("via inspector"); |
302 else | 374 else |
303 subtitle = WebInspector.UIString("inline stylesheet"); | 375 subtitle = WebInspector.UIString("inline stylesheet"); |
304 } | 376 } |
305 | 377 |
306 this.subtitle = subtitle; | 378 this.subtitle = subtitle; |
307 } | 379 } |
308 | 380 |
309 this.identifier = styleRule.selectorText; | 381 this.identifier = styleRule.selectorText; |
310 if (this.subtitle) | 382 if (this.subtitle) |
311 this.identifier += ":" + this.subtitleElement.textContent; | 383 this.identifier += ":" + this.subtitleElement.textContent; |
312 } | 384 } |
313 | 385 |
314 WebInspector.StylePropertiesSection.prototype = { | 386 WebInspector.StylePropertiesSection.prototype = { |
315 get usedProperties() | 387 get usedProperties() |
316 { | 388 { |
317 return this._usedProperties || {}; | 389 return this._usedProperties || {}; |
318 }, | 390 }, |
319 | 391 |
320 set usedProperties(x) | 392 set usedProperties(x) |
321 { | 393 { |
322 this._usedProperties = x; | 394 this._usedProperties = x; |
323 this.update(); | 395 this.update(); |
324 }, | 396 }, |
325 | 397 |
326 expand: function(dontRememberState) | 398 expand: function(dontRememberState) |
327 { | 399 { |
| 400 if (this._blank) |
| 401 return; |
| 402 |
328 WebInspector.PropertiesSection.prototype.expand.call(this); | 403 WebInspector.PropertiesSection.prototype.expand.call(this); |
329 if (dontRememberState) | 404 if (dontRememberState) |
330 return; | 405 return; |
331 | 406 |
332 if (!Preferences.styleRulesExpandedState) | 407 if (!Preferences.styleRulesExpandedState) |
333 Preferences.styleRulesExpandedState = {}; | 408 Preferences.styleRulesExpandedState = {}; |
334 Preferences.styleRulesExpandedState[this.identifier] = true; | 409 Preferences.styleRulesExpandedState[this.identifier] = true; |
335 }, | 410 }, |
336 | 411 |
337 collapse: function(dontRememberState) | 412 collapse: function(dontRememberState) |
338 { | 413 { |
339 WebInspector.PropertiesSection.prototype.collapse.call(this); | 414 WebInspector.PropertiesSection.prototype.collapse.call(this); |
340 if (dontRememberState) | 415 if (dontRememberState) |
341 return; | 416 return; |
342 | 417 |
343 if (!Preferences.styleRulesExpandedState) | 418 if (!Preferences.styleRulesExpandedState) |
344 Preferences.styleRulesExpandedState = {}; | 419 Preferences.styleRulesExpandedState = {}; |
345 Preferences.styleRulesExpandedState[this.identifier] = false; | 420 Preferences.styleRulesExpandedState[this.identifier] = false; |
346 }, | 421 }, |
347 | 422 |
348 isPropertyInherited: function(property) | 423 isPropertyInherited: function(property) |
349 { | 424 { |
350 if (!this.computedStyle || !this._usedProperties) | 425 if (!this.computedStyle || !this._usedProperties || this.noAffect) |
351 return false; | 426 return false; |
352 // These properties should always show for Computed Style. | 427 // These properties should always show for Computed Style. |
353 var alwaysShowComputedProperties = { "display": true, "height": true, "w
idth": true }; | 428 var alwaysShowComputedProperties = { "display": true, "height": true, "w
idth": true }; |
354 return !(property in this.usedProperties) && !(property in alwaysShowCom
putedProperties) && !(property in this.disabledComputedProperties); | 429 return !(property in this.usedProperties) && !(property in alwaysShowCom
putedProperties) && !(property in this.disabledComputedProperties); |
355 }, | 430 }, |
356 | 431 |
357 isPropertyOverloaded: function(property, shorthand) | 432 isPropertyOverloaded: function(property, shorthand) |
358 { | 433 { |
359 if (this.computedStyle || !this._usedProperties) | 434 if (this.computedStyle || !this._usedProperties || this.noAffect) |
360 return false; | 435 return false; |
361 | 436 |
362 var used = (property in this.usedProperties); | 437 var used = (property in this.usedProperties); |
363 if (used || !shorthand) | 438 if (used || !shorthand) |
364 return !used; | 439 return !used; |
365 | 440 |
366 // Find out if any of the individual longhand properties of the shorthan
d | 441 // Find out if any of the individual longhand properties of the shorthan
d |
367 // are used, if none are then the shorthand is overloaded too. | 442 // are used, if none are then the shorthand is overloaded too. |
368 var longhandProperties = getLonghandProperties(this.styleRule.style, pro
perty); | 443 var longhandProperties = this.styleRule.style.getLonghandProperties(prop
erty); |
369 for (var j = 0; j < longhandProperties.length; ++j) { | 444 for (var j = 0; j < longhandProperties.length; ++j) { |
370 var individualProperty = longhandProperties[j]; | 445 var individualProperty = longhandProperties[j]; |
371 if (individualProperty in this.usedProperties) | 446 if (individualProperty in this.usedProperties) |
372 return false; | 447 return false; |
373 } | 448 } |
374 | 449 |
375 return true; | 450 return true; |
376 }, | 451 }, |
377 | 452 |
| 453 isInspectorStylesheet: function() |
| 454 { |
| 455 return (this.styleRule.parentStyleSheet === WebInspector.panels.elements
.stylesheet); |
| 456 }, |
| 457 |
378 update: function(full) | 458 update: function(full) |
379 { | 459 { |
380 if (full || this.computedStyle) { | 460 if (full || this.computedStyle) { |
381 this.propertiesTreeOutline.removeChildren(); | 461 this.propertiesTreeOutline.removeChildren(); |
382 this.populated = false; | 462 this.populated = false; |
383 } else { | 463 } else { |
384 var child = this.propertiesTreeOutline.children[0]; | 464 var child = this.propertiesTreeOutline.children[0]; |
385 while (child) { | 465 while (child) { |
386 child.overloaded = this.isPropertyOverloaded(child.name, child.s
horthand); | 466 child.overloaded = this.isPropertyOverloaded(child.name, child.s
horthand); |
387 child = child.traverseNextTreeElement(false, null, true); | 467 child = child.traverseNextTreeElement(false, null, true); |
388 } | 468 } |
389 } | 469 } |
| 470 |
| 471 if (this._afterUpdate) { |
| 472 this._afterUpdate(this); |
| 473 delete this._afterUpdate; |
| 474 } |
390 }, | 475 }, |
391 | 476 |
392 onpopulate: function() | 477 onpopulate: function() |
393 { | 478 { |
394 var style = this.styleRule.style; | 479 var style = this.styleRule.style; |
395 | 480 |
396 var foundShorthands = {}; | 481 var foundShorthands = {}; |
397 var uniqueProperties = getUniqueStyleProperties(style); | 482 var uniqueProperties = style.uniqueStyleProperties; |
398 var disabledProperties = style.__disabledPropertyValues || {}; | 483 var disabledProperties = style.__disabledPropertyValues || {}; |
399 | 484 |
400 for (var name in disabledProperties) | 485 for (var name in disabledProperties) |
401 uniqueProperties.push(name); | 486 uniqueProperties.push(name); |
402 | 487 |
403 uniqueProperties.sort(); | 488 uniqueProperties.sort(); |
404 | 489 |
405 for (var i = 0; i < uniqueProperties.length; ++i) { | 490 for (var i = 0; i < uniqueProperties.length; ++i) { |
406 var name = uniqueProperties[i]; | 491 var name = uniqueProperties[i]; |
407 var disabled = name in disabledProperties; | 492 var disabled = name in disabledProperties; |
408 if (!disabled && this.disabledComputedProperties && !(name in this.u
sedProperties) && name in this.disabledComputedProperties) | 493 if (!disabled && this.disabledComputedProperties && !(name in this.u
sedProperties) && name in this.disabledComputedProperties) |
409 disabled = true; | 494 disabled = true; |
410 | 495 |
411 var shorthand = !disabled ? style.getPropertyShorthand(name) : null; | 496 var shorthand = !disabled ? style.getPropertyShorthand(name) : null; |
412 | 497 |
413 if (shorthand && shorthand in foundShorthands) | 498 if (shorthand && shorthand in foundShorthands) |
414 continue; | 499 continue; |
415 | 500 |
416 if (shorthand) { | 501 if (shorthand) { |
417 foundShorthands[shorthand] = true; | 502 foundShorthands[shorthand] = true; |
418 name = shorthand; | 503 name = shorthand; |
419 } | 504 } |
420 | 505 |
421 var isShorthand = (shorthand ? true : false); | 506 var isShorthand = (shorthand ? true : false); |
422 var inherited = this.isPropertyInherited(name); | 507 var inherited = this.isPropertyInherited(name); |
423 var overloaded = this.isPropertyOverloaded(name, isShorthand); | 508 var overloaded = this.isPropertyOverloaded(name, isShorthand); |
424 | 509 |
425 var item = new WebInspector.StylePropertyTreeElement(style, name, is
Shorthand, inherited, overloaded, disabled); | 510 var item = new WebInspector.StylePropertyTreeElement(this.styleRule,
style, name, isShorthand, inherited, overloaded, disabled); |
426 this.propertiesTreeOutline.appendChild(item); | 511 this.propertiesTreeOutline.appendChild(item); |
427 } | 512 } |
| 513 }, |
| 514 |
| 515 findTreeElementWithName: function(name) |
| 516 { |
| 517 var treeElement = this.propertiesTreeOutline.children[0]; |
| 518 while (treeElement) { |
| 519 if (treeElement.name === name) |
| 520 return treeElement; |
| 521 treeElement = treeElement.traverseNextTreeElement(true, null, true); |
| 522 } |
| 523 return null; |
| 524 }, |
| 525 |
| 526 addNewBlankProperty: function() |
| 527 { |
| 528 var item = new WebInspector.StylePropertyTreeElement(this.styleRule, thi
s.styleRule.style, "", false, false, false, false); |
| 529 this.propertiesTreeOutline.appendChild(item); |
| 530 item.listItemElement.textContent = ""; |
| 531 item._newProperty = true; |
| 532 return item; |
| 533 }, |
| 534 |
| 535 _dblclickEmptySpace: function(event) |
| 536 { |
| 537 this.expand(); |
| 538 this.addNewBlankProperty().startEditing(); |
| 539 }, |
| 540 |
| 541 _dblclickSelector: function(event) |
| 542 { |
| 543 if (!this.editable) |
| 544 return; |
| 545 |
| 546 if (!this.rule && this.propertiesTreeOutline.children.length === 0) { |
| 547 this.expand(); |
| 548 this.addNewBlankProperty().startEditing(); |
| 549 return; |
| 550 } |
| 551 |
| 552 if (!this.rule) |
| 553 return; |
| 554 |
| 555 this.startEditingSelector(); |
| 556 event.stopPropagation(); |
| 557 }, |
| 558 |
| 559 startEditingSelector: function() |
| 560 { |
| 561 var element = this.titleElement; |
| 562 if (WebInspector.isBeingEdited(element)) |
| 563 return; |
| 564 |
| 565 var context = this.styleRule.selectorText; |
| 566 WebInspector.startEditing(this.titleElement, this.editingSelectorCommitt
ed.bind(this), this.editingSelectorCancelled.bind(this), context); |
| 567 window.getSelection().setBaseAndExtent(element, 0, element, 1); |
| 568 }, |
| 569 |
| 570 editingSelectorCommitted: function(element, newContent, oldContent, context,
moveDirection) |
| 571 { |
| 572 function moveToNextIfNeeded() { |
| 573 if (!moveDirection || moveDirection !== "forward") |
| 574 return; |
| 575 |
| 576 this.expand(); |
| 577 if (this.propertiesTreeOutline.children.length === 0) |
| 578 this.addNewBlankProperty().startEditing(); |
| 579 else { |
| 580 var item = this.propertiesTreeOutline.children[0] |
| 581 item.startEditing(item.valueElement); |
| 582 } |
| 583 } |
| 584 |
| 585 if (newContent === oldContent) |
| 586 return moveToNextIfNeeded.call(this); |
| 587 |
| 588 var self = this; |
| 589 var callback = function(result) { |
| 590 if (!result) { |
| 591 // Invalid Syntax for a Selector |
| 592 self.editingSelectorCancelled(element, context); |
| 593 moveToNextIfNeeded.call(self); |
| 594 return; |
| 595 } |
| 596 |
| 597 var newRulePayload = result[0]; |
| 598 var doesAffectSelectedNode = result[1]; |
| 599 if (!doesAffectSelectedNode) { |
| 600 self.noAffect = true; |
| 601 self.element.addStyleClass("no-affect"); |
| 602 } else { |
| 603 delete self.noAffect; |
| 604 self.element.removeStyleClass("no-affect"); |
| 605 } |
| 606 |
| 607 var newRule = WebInspector.CSSStyleDeclaration.parseRule(newRulePayl
oad); |
| 608 self.rule = newRule; |
| 609 self.styleRule = { section: self, style: newRule.style, selectorText
: newRule.selectorText, parentStyleSheet: newRule.parentStyleSheet, rule: newRul
e }; |
| 610 var oldIdentifier = this.identifier; |
| 611 self.identifier = newRule.selectorText + ":" + self.subtitleElement.
textContent; |
| 612 self.pane.update(null, true); |
| 613 WebInspector.panels.elements.renameSelector(oldIdentifier, this.iden
tifier, oldContent, newContent); |
| 614 moveToNextIfNeeded.call(self); |
| 615 }; |
| 616 |
| 617 InspectorController.applyStyleRuleText(this.rule.id, newContent, this.pa
ne.node.id, callback); |
| 618 }, |
| 619 |
| 620 editingSelectorCancelled: function(element, context) |
| 621 { |
| 622 element.textContent = context; |
428 } | 623 } |
429 } | 624 } |
430 | 625 |
431 WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.Propertie
sSection.prototype; | 626 WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.Propertie
sSection.prototype; |
432 | 627 |
433 WebInspector.StylePropertyTreeElement = function(style, name, shorthand, inherit
ed, overloaded, disabled) | 628 WebInspector.BlankStylePropertiesSection = function() |
434 { | 629 { |
| 630 WebInspector.PropertiesSection.call(this, WebInspector.UIString("Double-Clic
k to Add"), null); |
| 631 |
| 632 this._blank = true; |
| 633 this._dblclickListener = this._dblclick.bind(this); |
| 634 this.element.addStyleClass("blank-section"); |
| 635 this.titleElement.addStyleClass("blank-title"); |
| 636 this.titleElement.addEventListener("click", function(e) { e.stopPropagation(
); }, false); |
| 637 this.titleElement.addEventListener("dblclick", this._dblclickListener, false
); |
| 638 } |
| 639 |
| 640 WebInspector.BlankStylePropertiesSection.prototype = { |
| 641 _dblclick: function(event) |
| 642 { |
| 643 this.startEditing(); |
| 644 }, |
| 645 |
| 646 startEditing: function() |
| 647 { |
| 648 var element = this.titleElement; |
| 649 if (WebInspector.isBeingEdited(element)) |
| 650 return; |
| 651 |
| 652 this.titleElement.textContent = this.pane.appropriateSelectorForNode(); |
| 653 this.titleElement.removeStyleClass("blank-title"); |
| 654 WebInspector.startEditing(this.titleElement, this.editingCommitted.bind(
this), this.editingCancelled.bind(this), ""); |
| 655 window.getSelection().setBaseAndExtent(element, 0, element, 1); |
| 656 }, |
| 657 |
| 658 editingCancelled: function() |
| 659 { |
| 660 this.titleElement.textContent = WebInspector.UIString("Double-Click to A
dd"); |
| 661 this.titleElement.addStyleClass("blank-title"); |
| 662 }, |
| 663 |
| 664 editingCommitted: function(element, newContent, oldContent, context) |
| 665 { |
| 666 var self = this; |
| 667 var callback = function(result) { |
| 668 if (!result) { |
| 669 // Invalid Syntax for a Selector |
| 670 self.editingCancelled(); |
| 671 return; |
| 672 } |
| 673 var styleRule = result[0]; |
| 674 var doesSelectorAffectSelectedNode = result[1]; |
| 675 self.makeNormal(WebInspector.CSSStyleDeclaration.parseRule(styleRule
)); |
| 676 |
| 677 if (!doesSelectorAffectSelectedNode) { |
| 678 self.noAffect = true; |
| 679 self.element.addStyleClass("no-affect"); |
| 680 } |
| 681 |
| 682 self.subtitleElement.textContent = WebInspector.UIString("via inspec
tor"); |
| 683 self.expand(); |
| 684 |
| 685 self.pane.addBlankSection(); |
| 686 self.addNewBlankProperty().startEditing(); |
| 687 }; |
| 688 InspectorController.addStyleSelector(newContent, this.pane.node.id, call
back); |
| 689 }, |
| 690 |
| 691 makeNormal: function(styleRule) |
| 692 { |
| 693 this.titleElement.removeEventListener("dblclick", this._dblclickListener
, false); |
| 694 this.titleElement.addEventListener("dblclick", this._dblclickSelector.bi
nd(this), false); |
| 695 this.element.addEventListener("dblclick", this._dblclickEmptySpace.bind(
this), false); |
| 696 this.element.removeStyleClass("blank-section"); |
| 697 delete this._blank; |
| 698 delete this._dblclick; |
| 699 delete this.startEditing; |
| 700 delete this.editingCancelled; |
| 701 delete this.editingCommitted; |
| 702 delete this._dblclickListener; |
| 703 delete this.makeNormal; |
| 704 this.styleRule = styleRule; |
| 705 this.rule = styleRule.rule; |
| 706 this.computedStyle = false; |
| 707 this.editable = true; |
| 708 this.identifier = styleRule.selectorText + ":inspector"; |
| 709 // leftovers are: this.noAffect if applicable |
| 710 } |
| 711 } |
| 712 |
| 713 WebInspector.BlankStylePropertiesSection.prototype.__proto__ = WebInspector.Styl
ePropertiesSection.prototype; |
| 714 |
| 715 WebInspector.StylePropertyTreeElement = function(styleRule, style, name, shortha
nd, inherited, overloaded, disabled) |
| 716 { |
| 717 this._styleRule = styleRule; |
435 this.style = style; | 718 this.style = style; |
436 this.name = name; | 719 this.name = name; |
437 this.shorthand = shorthand; | 720 this.shorthand = shorthand; |
438 this._inherited = inherited; | 721 this._inherited = inherited; |
439 this._overloaded = overloaded; | 722 this._overloaded = overloaded; |
440 this._disabled = disabled; | 723 this._disabled = disabled; |
441 | 724 |
442 // Pass an empty title, the title gets made later in onattach. | 725 // Pass an empty title, the title gets made later in onattach. |
443 TreeElement.call(this, "", null, shorthand); | 726 TreeElement.call(this, "", null, shorthand); |
444 } | 727 } |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
480 if (x === this._disabled) | 763 if (x === this._disabled) |
481 return; | 764 return; |
482 this._disabled = x; | 765 this._disabled = x; |
483 this.updateState(); | 766 this.updateState(); |
484 }, | 767 }, |
485 | 768 |
486 get priority() | 769 get priority() |
487 { | 770 { |
488 if (this.disabled && this.style.__disabledPropertyPriorities && this.nam
e in this.style.__disabledPropertyPriorities) | 771 if (this.disabled && this.style.__disabledPropertyPriorities && this.nam
e in this.style.__disabledPropertyPriorities) |
489 return this.style.__disabledPropertyPriorities[this.name]; | 772 return this.style.__disabledPropertyPriorities[this.name]; |
490 return (this.shorthand ? getShorthandPriority(this.style, this.name) : t
his.style.getPropertyPriority(this.name)); | 773 return (this.shorthand ? this.style.getShorthandPriority(this.name) : th
is.style.getPropertyPriority(this.name)); |
491 }, | 774 }, |
492 | 775 |
493 get value() | 776 get value() |
494 { | 777 { |
495 if (this.disabled && this.style.__disabledPropertyValues && this.name in
this.style.__disabledPropertyValues) | 778 if (this.disabled && this.style.__disabledPropertyValues && this.name in
this.style.__disabledPropertyValues) |
496 return this.style.__disabledPropertyValues[this.name]; | 779 return this.style.__disabledPropertyValues[this.name]; |
497 return (this.shorthand ? getShorthandValue(this.style, this.name) : this
.style.getPropertyValue(this.name)); | 780 return (this.shorthand ? this.style.getShorthandValue(this.name) : this.
style.getPropertyValue(this.name)); |
498 }, | 781 }, |
499 | 782 |
500 onattach: function() | 783 onattach: function() |
501 { | 784 { |
502 this.updateTitle(); | 785 this.updateTitle(); |
503 }, | 786 }, |
504 | 787 |
505 updateTitle: function() | 788 updateTitle: function() |
506 { | 789 { |
507 // "Nicknames" for some common values that are easier to read. | 790 // "Nicknames" for some common values that are easier to read. |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
551 | 834 |
552 var enabledCheckboxElement = document.createElement("input"); | 835 var enabledCheckboxElement = document.createElement("input"); |
553 enabledCheckboxElement.className = "enabled-button"; | 836 enabledCheckboxElement.className = "enabled-button"; |
554 enabledCheckboxElement.type = "checkbox"; | 837 enabledCheckboxElement.type = "checkbox"; |
555 enabledCheckboxElement.checked = !this.disabled; | 838 enabledCheckboxElement.checked = !this.disabled; |
556 enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bin
d(this), false); | 839 enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bin
d(this), false); |
557 | 840 |
558 var nameElement = document.createElement("span"); | 841 var nameElement = document.createElement("span"); |
559 nameElement.className = "name"; | 842 nameElement.className = "name"; |
560 nameElement.textContent = this.name; | 843 nameElement.textContent = this.name; |
| 844 this.nameElement = nameElement; |
561 | 845 |
562 var valueElement = document.createElement("span"); | 846 var valueElement = document.createElement("span"); |
563 valueElement.className = "value"; | 847 valueElement.className = "value"; |
564 valueElement.innerHTML = htmlValue; | 848 valueElement.innerHTML = htmlValue; |
| 849 this.valueElement = valueElement; |
565 | 850 |
566 if (priority) { | 851 if (priority) { |
567 var priorityElement = document.createElement("span"); | 852 var priorityElement = document.createElement("span"); |
568 priorityElement.className = "priority"; | 853 priorityElement.className = "priority"; |
569 priorityElement.textContent = priority; | 854 priorityElement.textContent = priority; |
570 } | 855 } |
571 | 856 |
572 this.listItemElement.removeChildren(); | 857 this.listItemElement.removeChildren(); |
573 | 858 |
574 // Append the checkbox for root elements of an editable section. | 859 // Append the checkbox for root elements of an editable section. |
575 if (this.treeOutline.section && this.treeOutline.section.editable && thi
s.parent.root) | 860 if (this.treeOutline.section && this.treeOutline.section.editable && thi
s.parent.root) |
576 this.listItemElement.appendChild(enabledCheckboxElement); | 861 this.listItemElement.appendChild(enabledCheckboxElement); |
577 this.listItemElement.appendChild(nameElement); | 862 this.listItemElement.appendChild(nameElement); |
578 this.listItemElement.appendChild(document.createTextNode(": ")); | 863 this.listItemElement.appendChild(document.createTextNode(": ")); |
579 this.listItemElement.appendChild(valueElement); | 864 this.listItemElement.appendChild(valueElement); |
580 | 865 |
581 if (priorityElement) { | 866 if (priorityElement) { |
582 this.listItemElement.appendChild(document.createTextNode(" ")); | 867 this.listItemElement.appendChild(document.createTextNode(" ")); |
583 this.listItemElement.appendChild(priorityElement); | 868 this.listItemElement.appendChild(priorityElement); |
584 } | 869 } |
585 | 870 |
586 this.listItemElement.appendChild(document.createTextNode(";")); | 871 this.listItemElement.appendChild(document.createTextNode(";")); |
587 | 872 |
588 if (value) { | 873 if (value) { |
589 // FIXME: this only covers W3C and CSS 16 valid color names | 874 // FIXME: this only covers W3C and CSS 16 valid color names |
590 var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(
#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purpl
e|red|silver|teal|white|yellow/g); | 875 var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(
#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purpl
e|red|silver|teal|white|yellow|transparent/g); |
| 876 var swatch; |
591 if (colors) { | 877 if (colors) { |
592 var colorsLength = colors.length; | 878 var colorsLength = colors.length; |
593 for (var i = 0; i < colorsLength; ++i) { | 879 for (var i = 0; i < colorsLength; ++i) { |
594 var swatchElement = document.createElement("span"); | 880 var swatchElement = document.createElement("span"); |
595 swatchElement.className = "swatch"; | 881 swatchElement.className = "swatch"; |
596 swatchElement.style.setProperty("background-color", colors[i
]); | 882 swatchElement.style.setProperty("background-color", colors[i
]); |
597 this.listItemElement.appendChild(swatchElement); | 883 this.listItemElement.appendChild(swatchElement); |
| 884 swatch = swatchElement; |
| 885 } |
| 886 } |
| 887 |
| 888 // Rotate through Color Representations by Clicking on the Swatch |
| 889 // Simple: rgb -> hsl -> nickname? -> shorthex? -> hex -> ... |
| 890 // Advanced: rgba -> hsla -> nickname? -> ... |
| 891 if (colors && colors.length === 1) { |
| 892 try { |
| 893 var color = new WebInspector.Color(htmlValue); |
| 894 } catch(e) { |
| 895 var color = null; |
| 896 } |
| 897 |
| 898 if (color) { |
| 899 swatch.addEventListener("click", changeColorDisplay, false); |
| 900 swatch.addEventListener("dblclick", function(event) { |
| 901 event.stopPropagation(); |
| 902 }, false); |
| 903 |
| 904 var mode = color.mode; |
| 905 var valueElement = this.valueElement; |
| 906 function changeColorDisplay(event) { |
| 907 |
| 908 function changeTo(newMode, content) { |
| 909 mode = newMode; |
| 910 valueElement.textContent = content; |
| 911 } |
| 912 |
| 913 switch (mode) { |
| 914 case "rgb": |
| 915 changeTo("hsl", color.toHsl()); |
| 916 break; |
| 917 |
| 918 case "shorthex": |
| 919 changeTo("hex", color.toHex()); |
| 920 break; |
| 921 |
| 922 case "hex": |
| 923 changeTo("rgb", color.toRgb()); |
| 924 break; |
| 925 |
| 926 case "nickname": |
| 927 if (color.simple) { |
| 928 if (color.hasShortHex()) |
| 929 changeTo("shorthex", color.toShortHex())
; |
| 930 else |
| 931 changeTo("hex", color.toHex()); |
| 932 } else |
| 933 changeTo("rgba", color.toRgba()); |
| 934 break; |
| 935 |
| 936 case "hsl": |
| 937 if (color.nickname) |
| 938 changeTo("nickname", color.toNickname()); |
| 939 else if (color.hasShortHex()) |
| 940 changeTo("shorthex", color.toShortHex()); |
| 941 else |
| 942 changeTo("hex", color.toHex()); |
| 943 break; |
| 944 |
| 945 case "rgba": |
| 946 changeTo("hsla", color.toHsla()); |
| 947 break; |
| 948 |
| 949 case "hsla": |
| 950 if (color.nickname) |
| 951 changeTo("nickname", color.toNickname()); |
| 952 else |
| 953 changeTo("rgba", color.toRgba()); |
| 954 break; |
| 955 } |
| 956 } |
598 } | 957 } |
599 } | 958 } |
600 } | 959 } |
601 | 960 |
602 this.tooltip = this.name + ": " + (valueNicknames[value] || value) + (pr
iority ? " " + priority : ""); | 961 this.tooltip = this.name + ": " + (valueNicknames[value] || value) + (pr
iority ? " " + priority : ""); |
603 }, | 962 }, |
604 | 963 |
605 updateAll: function(updateAllRules) | 964 updateAll: function(updateAllRules) |
606 { | 965 { |
607 if (updateAllRules && this.treeOutline.section && this.treeOutline.secti
on.pane) | 966 if (updateAllRules && this.treeOutline.section && this.treeOutline.secti
on.pane) |
608 this.treeOutline.section.pane.update(null, this.treeOutline.section)
; | 967 this.treeOutline.section.pane.update(null, this.treeOutline.section)
; |
609 else if (this.treeOutline.section) | 968 else if (this.treeOutline.section) |
610 this.treeOutline.section.update(true); | 969 this.treeOutline.section.update(true); |
611 else | 970 else |
612 this.updateTitle(); // FIXME: this will not show new properties. But
we don't hit his case yet. | 971 this.updateTitle(); // FIXME: this will not show new properties. But
we don't hit his case yet. |
613 }, | 972 }, |
614 | 973 |
615 toggleEnabled: function(event) | 974 toggleEnabled: function(event) |
616 { | 975 { |
617 var disabled = !event.target.checked; | 976 var disabled = !event.target.checked; |
618 | 977 |
619 if (disabled) { | 978 var self = this; |
620 if (!this.style.__disabledPropertyValues || !this.style.__disabledPr
opertyPriorities) { | 979 var callback = function(newPayload) { |
621 var inspectedWindow = InspectorController.inspectedWindow(); | 980 if (!newPayload) |
622 this.style.__disabledProperties = new inspectedWindow.Object; | 981 return; |
623 this.style.__disabledPropertyValues = new inspectedWindow.Object
; | |
624 this.style.__disabledPropertyPriorities = new inspectedWindow.Ob
ject; | |
625 } | |
626 | 982 |
627 this.style.__disabledPropertyValues[this.name] = this.value; | 983 self.style = WebInspector.CSSStyleDeclaration.parseStyle(newPayload)
; |
628 this.style.__disabledPropertyPriorities[this.name] = this.priority; | 984 self._styleRule.style = self.style; |
629 | 985 |
630 if (this.shorthand) { | 986 // Set the disabled property here, since the code above replies on i
t not changing |
631 var longhandProperties = getLonghandProperties(this.style, this.
name); | 987 // until after the value and priority are retrieved. |
632 for (var i = 0; i < longhandProperties.length; ++i) { | 988 self.disabled = disabled; |
633 this.style.__disabledProperties[longhandProperties[i]] = tru
e; | |
634 this.style.removeProperty(longhandProperties[i]); | |
635 } | |
636 } else { | |
637 this.style.__disabledProperties[this.name] = true; | |
638 this.style.removeProperty(this.name); | |
639 } | |
640 } else { | |
641 this.style.setProperty(this.name, this.value, this.priority); | |
642 delete this.style.__disabledProperties[this.name]; | |
643 delete this.style.__disabledPropertyValues[this.name]; | |
644 delete this.style.__disabledPropertyPriorities[this.name]; | |
645 } | |
646 | 989 |
647 // Set the disabled property here, since the code above replies on it no
t changing | 990 if (self.treeOutline.section && self.treeOutline.section.pane) |
648 // until after the value and priority are retrieved. | 991 self.treeOutline.section.pane.dispatchEventToListeners("style pr
operty toggled"); |
649 this.disabled = disabled; | |
650 | 992 |
651 if (this.treeOutline.section && this.treeOutline.section.pane) | 993 self.updateAll(true); |
652 this.treeOutline.section.pane.dispatchEventToListeners("style proper
ty toggled"); | 994 }; |
653 | 995 InspectorController.toggleStyleEnabled(this.style.id, this.name, disable
d, callback); |
654 this.updateAll(true); | |
655 }, | 996 }, |
656 | 997 |
657 updateState: function() | 998 updateState: function() |
658 { | 999 { |
659 if (!this.listItemElement) | 1000 if (!this.listItemElement) |
660 return; | 1001 return; |
661 | 1002 |
662 if (this.style.isPropertyImplicit(this.name) || this.value === "initial"
) | 1003 if (this.style.isPropertyImplicit(this.name) || this.value === "initial"
) |
663 this.listItemElement.addStyleClass("implicit"); | 1004 this.listItemElement.addStyleClass("implicit"); |
664 else | 1005 else |
(...skipping 14 matching lines...) Expand all Loading... |
679 else | 1020 else |
680 this.listItemElement.removeStyleClass("disabled"); | 1021 this.listItemElement.removeStyleClass("disabled"); |
681 }, | 1022 }, |
682 | 1023 |
683 onpopulate: function() | 1024 onpopulate: function() |
684 { | 1025 { |
685 // Only populate once and if this property is a shorthand. | 1026 // Only populate once and if this property is a shorthand. |
686 if (this.children.length || !this.shorthand) | 1027 if (this.children.length || !this.shorthand) |
687 return; | 1028 return; |
688 | 1029 |
689 var longhandProperties = getLonghandProperties(this.style, this.name); | 1030 var longhandProperties = this.style.getLonghandProperties(this.name); |
690 for (var i = 0; i < longhandProperties.length; ++i) { | 1031 for (var i = 0; i < longhandProperties.length; ++i) { |
691 var name = longhandProperties[i]; | 1032 var name = longhandProperties[i]; |
692 | 1033 |
693 if (this.treeOutline.section) { | 1034 if (this.treeOutline.section) { |
694 var inherited = this.treeOutline.section.isPropertyInherited(nam
e); | 1035 var inherited = this.treeOutline.section.isPropertyInherited(nam
e); |
695 var overloaded = this.treeOutline.section.isPropertyOverloaded(n
ame); | 1036 var overloaded = this.treeOutline.section.isPropertyOverloaded(n
ame); |
696 } | 1037 } |
697 | 1038 |
698 var item = new WebInspector.StylePropertyTreeElement(this.style, nam
e, false, inherited, overloaded); | 1039 var item = new WebInspector.StylePropertyTreeElement(this._styleRule
, this.style, name, false, inherited, overloaded); |
699 this.appendChild(item); | 1040 this.appendChild(item); |
700 } | 1041 } |
701 }, | 1042 }, |
702 | 1043 |
703 ondblclick: function(element, event) | 1044 ondblclick: function(element, event) |
704 { | 1045 { |
705 this.startEditing(event.target); | 1046 this.startEditing(event.target); |
| 1047 event.stopPropagation(); |
706 }, | 1048 }, |
707 | 1049 |
708 startEditing: function(selectElement) | 1050 startEditing: function(selectElement) |
709 { | 1051 { |
710 // FIXME: we don't allow editing of longhand properties under a shorthan
d right now. | 1052 // FIXME: we don't allow editing of longhand properties under a shorthan
d right now. |
711 if (this.parent.shorthand) | 1053 if (this.parent.shorthand) |
712 return; | 1054 return; |
713 | 1055 |
714 if (WebInspector.isBeingEdited(this.listItemElement) || (this.treeOutlin
e.section && !this.treeOutline.section.editable)) | 1056 if (WebInspector.isBeingEdited(this.listItemElement) || (this.treeOutlin
e.section && !this.treeOutline.section.editable)) |
715 return; | 1057 return; |
(...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
802 | 1144 |
803 selection.removeAllRanges(); | 1145 selection.removeAllRanges(); |
804 selection.addRange(finalSelectionRange); | 1146 selection.addRange(finalSelectionRange); |
805 | 1147 |
806 event.preventDefault(); | 1148 event.preventDefault(); |
807 event.handled = true; | 1149 event.handled = true; |
808 | 1150 |
809 if (!this.originalCSSText) { | 1151 if (!this.originalCSSText) { |
810 // Remember the rule's original CSS text, so it can be restored | 1152 // Remember the rule's original CSS text, so it can be restored |
811 // if the editing is canceled and before each apply. | 1153 // if the editing is canceled and before each apply. |
812 this.originalCSSText = getStyleTextWithShorthands(this.style); | 1154 this.originalCSSText = this.style.styleTextWithShorthands(); |
813 } else { | 1155 } else { |
814 // Restore the original CSS text before applying user changes. This
is needed to prevent | 1156 // Restore the original CSS text before applying user changes. This
is needed to prevent |
815 // new properties from sticking around if the user adds one, then re
moves it. | 1157 // new properties from sticking around if the user adds one, then re
moves it. |
816 this.style.cssText = this.originalCSSText; | 1158 InspectorController.setStyleText(this.style.id, this.originalCSSText
); |
817 } | 1159 } |
818 | 1160 |
819 this.applyStyleText(this.listItemElement.textContent); | 1161 this.applyStyleText(this.listItemElement.textContent); |
820 }, | 1162 }, |
821 | 1163 |
822 editingEnded: function(context) | 1164 editingEnded: function(context) |
823 { | 1165 { |
824 this.hasChildren = context.hasChildren; | 1166 this.hasChildren = context.hasChildren; |
825 if (context.expanded) | 1167 if (context.expanded) |
826 this.expand(); | 1168 this.expand(); |
827 delete this.listItemElement.handleKeyEvent; | 1169 delete this.listItemElement.handleKeyEvent; |
828 delete this.originalCSSText; | 1170 delete this.originalCSSText; |
829 }, | 1171 }, |
830 | 1172 |
831 editingCancelled: function(element, context) | 1173 editingCancelled: function(element, context) |
832 { | 1174 { |
833 if (this.originalCSSText) { | 1175 if (this._newProperty) |
834 this.style.cssText = this.originalCSSText; | 1176 this.treeOutline.removeChild(this); |
| 1177 else if (this.originalCSSText) { |
| 1178 InspectorController.setStyleText(this.style.id, this.originalCSSText
); |
835 | 1179 |
836 if (this.treeOutline.section && this.treeOutline.section.pane) | 1180 if (this.treeOutline.section && this.treeOutline.section.pane) |
837 this.treeOutline.section.pane.dispatchEventToListeners("style ed
ited"); | 1181 this.treeOutline.section.pane.dispatchEventToListeners("style ed
ited"); |
838 | 1182 |
839 this.updateAll(); | 1183 this.updateAll(); |
840 } else | 1184 } else |
841 this.updateTitle(); | 1185 this.updateTitle(); |
842 | 1186 |
843 this.editingEnded(context); | 1187 this.editingEnded(context); |
844 }, | 1188 }, |
845 | 1189 |
846 editingCommitted: function(element, userInput, previousContent, context) | 1190 editingCommitted: function(element, userInput, previousContent, context, mov
eDirection) |
847 { | 1191 { |
848 this.editingEnded(context); | 1192 this.editingEnded(context); |
849 | 1193 |
850 if (userInput === previousContent) | 1194 // Determine where to move to before making changes |
851 return; // nothing changed, so do nothing else | 1195 var newProperty, moveToPropertyName, moveToSelector; |
| 1196 var moveTo = (moveDirection === "forward" ? this.nextSibling : this.prev
iousSibling); |
| 1197 if (moveTo) |
| 1198 moveToPropertyName = moveTo.name; |
| 1199 else if (moveDirection === "forward") |
| 1200 newProperty = true; |
| 1201 else if (moveDirection === "backward" && this.treeOutline.section.rule) |
| 1202 moveToSelector = true; |
852 | 1203 |
853 this.applyStyleText(userInput, true); | 1204 // Make the Changes and trigger the moveToNextCallback after updating |
| 1205 var blankInput = /^\s*$/.test(userInput); |
| 1206 if (userInput !== previousContent || (this._newProperty && blankInput))
{ // only if something changed, or adding a new style and it was blank |
| 1207 this.treeOutline.section._afterUpdate = moveToNextCallback.bind(this
, this._newProperty, !blankInput); |
| 1208 this.applyStyleText(userInput, true); |
| 1209 } else |
| 1210 moveToNextCallback(this._newProperty, false, this.treeOutline.sectio
n, false); |
| 1211 |
| 1212 // The Callback to start editing the next property |
| 1213 function moveToNextCallback(alreadyNew, valueChanged, section) { |
| 1214 if (!moveDirection) |
| 1215 return; |
| 1216 |
| 1217 // User just tabbed through without changes |
| 1218 if (moveTo && moveTo.parent) { |
| 1219 moveTo.startEditing(moveTo.valueElement); |
| 1220 return; |
| 1221 } |
| 1222 |
| 1223 // User has made a change then tabbed, wiping all the original treeE
lements, |
| 1224 // recalculate the new treeElement for the same property we were goi
ng to edit next |
| 1225 if (moveTo && !moveTo.parent) { |
| 1226 var treeElement = section.findTreeElementWithName(moveToProperty
Name); |
| 1227 if (treeElement) |
| 1228 treeElement.startEditing(treeElement.valueElement); |
| 1229 return; |
| 1230 } |
| 1231 |
| 1232 // Create a new attribute in this section |
| 1233 if (newProperty) { |
| 1234 if (alreadyNew && !valueChanged) |
| 1235 return; |
| 1236 |
| 1237 var item = section.addNewBlankProperty(); |
| 1238 item.startEditing(); |
| 1239 return; |
| 1240 } |
| 1241 |
| 1242 if (moveToSelector) |
| 1243 section.startEditingSelector(); |
| 1244 } |
854 }, | 1245 }, |
855 | 1246 |
856 applyStyleText: function(styleText, updateInterface) | 1247 applyStyleText: function(styleText, updateInterface) |
857 { | 1248 { |
| 1249 var section = this.treeOutline.section; |
| 1250 var elementsPanel = WebInspector.panels.elements; |
858 var styleTextLength = styleText.trimWhitespace().length; | 1251 var styleTextLength = styleText.trimWhitespace().length; |
859 | |
860 // Create a new element to parse the user input CSS. | |
861 var parseElement = document.createElement("span"); | |
862 parseElement.setAttribute("style", styleText); | |
863 | |
864 var tempStyle = parseElement.style; | |
865 if (tempStyle.length || !styleTextLength) { | |
866 // The input was parsable or the user deleted everything, so remove
the | |
867 // original property from the real style declaration. If this repres
ents | |
868 // a shorthand remove all the longhand properties. | |
869 if (this.shorthand) { | |
870 var longhandProperties = getLonghandProperties(this.style, this.
name); | |
871 for (var i = 0; i < longhandProperties.length; ++i) | |
872 this.style.removeProperty(longhandProperties[i]); | |
873 } else | |
874 this.style.removeProperty(this.name); | |
875 } | |
876 | |
877 if (!styleTextLength) { | 1252 if (!styleTextLength) { |
878 if (updateInterface) { | 1253 if (updateInterface) { |
879 // The user deleted the everything, so remove the tree element a
nd update. | 1254 // The user deleted everything, so remove the tree element and u
pdate. |
880 if (this.treeOutline.section && this.treeOutline.section.pane) | 1255 if (!this._newProperty) |
881 this.treeOutline.section.pane.update(); | 1256 delete section._afterUpdate; |
| 1257 if (section && section.pane) |
| 1258 section.pane.update(); |
882 this.parent.removeChild(this); | 1259 this.parent.removeChild(this); |
| 1260 elementsPanel.removeStyleChange(section.identifier, this.style,
this.name); |
883 } | 1261 } |
884 return; | 1262 return; |
885 } | 1263 } |
886 | 1264 |
887 if (!tempStyle.length) { | 1265 var self = this; |
888 // The user typed something, but it didn't parse. Just abort and res
tore | 1266 var callback = function(result) { |
889 // the original title for this property. | 1267 if (!result) { |
890 if (updateInterface) | 1268 // The user typed something, but it didn't parse. Just abort and
restore |
891 this.updateTitle(); | 1269 // the original title for this property. If this was a new attr
ibute and |
892 return; | 1270 // we couldn't parse, then just remove it. |
893 } | 1271 if (self._newProperty) { |
894 | 1272 self.parent.removeChild(self); |
895 // Iterate of the properties on the test element's style declaration and | 1273 return; |
896 // add them to the real style declaration. We take care to move shorthan
ds. | 1274 } |
897 var foundShorthands = {}; | 1275 if (updateInterface) |
898 var uniqueProperties = getUniqueStyleProperties(tempStyle); | 1276 self.updateTitle(); |
899 for (var i = 0; i < uniqueProperties.length; ++i) { | 1277 return; |
900 var name = uniqueProperties[i]; | |
901 var shorthand = tempStyle.getPropertyShorthand(name); | |
902 | |
903 if (shorthand && shorthand in foundShorthands) | |
904 continue; | |
905 | |
906 if (shorthand) { | |
907 var value = getShorthandValue(tempStyle, shorthand); | |
908 var priority = getShorthandPriority(tempStyle, shorthand); | |
909 foundShorthands[shorthand] = true; | |
910 } else { | |
911 var value = tempStyle.getPropertyValue(name); | |
912 var priority = tempStyle.getPropertyPriority(name); | |
913 } | 1278 } |
914 | 1279 |
915 // Set the property on the real style declaration. | 1280 var newPayload = result[0]; |
916 this.style.setProperty((shorthand || name), value, priority); | 1281 var changedProperties = result[1]; |
917 } | 1282 elementsPanel.removeStyleChange(section.identifier, self.style, self
.name); |
918 | 1283 |
919 if (this.treeOutline.section && this.treeOutline.section.pane) | 1284 self.style = WebInspector.CSSStyleDeclaration.parseStyle(newPayload)
; |
920 this.treeOutline.section.pane.dispatchEventToListeners("style edited
"); | 1285 for (var i = 0; i < changedProperties.length; ++i) |
| 1286 elementsPanel.addStyleChange(section.identifier, self.style, cha
ngedProperties[i]); |
| 1287 self._styleRule.style = self.style; |
| 1288 if (section && section.pane) |
| 1289 section.pane.dispatchEventToListeners("style edited"); |
921 | 1290 |
922 if (updateInterface) | 1291 if (updateInterface) |
923 this.updateAll(true); | 1292 self.updateAll(true); |
| 1293 |
| 1294 if (!self.rule) |
| 1295 WebInspector.panels.elements.treeOutline.update(); |
| 1296 }; |
| 1297 InspectorController.applyStyleText(this.style.id, styleText.trimWhitespa
ce(), this.name, callback); |
924 } | 1298 } |
925 } | 1299 } |
926 | 1300 |
927 WebInspector.StylePropertyTreeElement.prototype.__proto__ = TreeElement.prototyp
e; | 1301 WebInspector.StylePropertyTreeElement.prototype.__proto__ = TreeElement.prototyp
e; |
OLD | NEW |